ux-grid实现表格排序

需求说明：
1、第一行不参与排序
2、实现带%排序
3、实现null值排序
4、实现值相等不排序
5、实现含有占位符‘–‘排序放到最后

表格属性说明文档

效果图如下：

代码如下：

<template>
  <div>
    <ux-grid
      highlightCurrentRow
      :data="previewTableData"
      @sort-change="sortChange"
      ref="maxTable"
    >
      <ux-table-column type="index" width="60"></ux-table-column>
      <ux-table-column
        :sortable="index!==0?true:false" 
        :remote-sort="index!==0?true:false"
        v-for="(item, index) in tableTitle"
        :key="index"
        :field="item.val"
        :title="item.name"
      >
      </ux-table-column>
    </ux-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableTitle: [
        {
          name: "地区",
          val: "showcityname",
        },
        {
          name: "全为空",
          val: "date",
        },
        {
          name: "数量",
          val: "num",
        },
        {
          name: "包含--",
          val: "address",
        },
        {
          name: "包含null",
          val: "tag",
        },
        {
          name: "包含%",
          val: "bai",
        },
        
      ],
      previewTableData: [
        {
          date: null,
          num: 90,
          address: "--",
          tag: 2,
          bai: "100%",
          all: 1,
          showcityname:"重庆"
        },
        {
          date: null,
          num: 22,
          address: 1,
          tag: null,
          bai: "5%",
          all: 1,
          showcityname:"南岸"

        },
        {
          date: null,
          num: 3,
          address: 3,
          tag: 30,
          bai: null,
          all: 1,
          showcityname:"江北"

        },
        {
          date: null,
          num: 45,
          address: 2,
          tag: 11,
          bai: "-2.4%",
          all: 1,
          showcityname:"渝北"

        },
        {
          date: null,
          num: 5,
          address: "--",
          tag: 49,
          bai: "-8%",
          all: 1,
          showcityname:"九龙坡"

        },
        {
          date: null,
          num: 6,
          address: "--",
          tag: null,
          bai: null,
          all: 1,
          showcityname:"巴南"

        },
      ],
    //   复制一份数据
      previewTableDataClone: [
        {
          date: null,
          num: 90,
          address: "--",
          tag: 2,
          bai: "100%",
          all: 1,
          showcityname:"重庆"
        },
        {
          date: null,
          num: 22,
          address: 1,
          tag: null,
          bai: "5%",
          all: 1,
          showcityname:"南岸"

        },
        {
          date: null,
          num: 3,
          address: 3,
          tag: 30,
          bai: null,
          all: 1,
          showcityname:"江北"

        },
        {
          date: null,
          num: 45,
          address: 2,
          tag: 11,
          bai: "-2.4%",
          all: 1,
          showcityname:"渝北"

        },
        {
          date: null,
          num: 5,
          address: "--",
          tag: 49,
          bai: "-8%",
          all: 1,
          showcityname:"九龙坡"

        },
        {
          date: null,
          num: 6,
          address: "--",
          tag: null,
          bai: null,
          all: 1,
          showcityname:"巴南"

        },
      ],
    };
  },
  created() {},
  methods: {
    sortChange({ column, prop, order }) {
      let arr = [];
      let obj = {};
      console.log(column);
      console.log(prop);
      console.log(order);
      let nullArr = [];
      let otherArr = [];
      //判断是否都为null,true不执行排序，反之排序
      let flag = this.previewTableData.every((item) => !item[prop]);
      let equalVal = this.previewTableData.map((item) => item[prop]);
      let equalValFlag = false;
      //判断是否每个值都相等
      if (equalVal.length) {
        //和第一个值进行比较
        equalValFlag = equalVal.every((item) => item == equalVal[0]);
      }
      console.log(equalValFlag, "equalValFlag", flag, "flag");
      if (!flag && !equalValFlag) {
        console.log("我执行了");
        this.previewTableData.forEach((item, index) => {
          if (item.showcityname == "重庆") {
            console.log(item.showcityname);
            obj = item;
          }
        });
        if (!this.previewTableData.length) return;

        if (order == "asc") {
          this.previewTableData.forEach((item) => {
            if (item[prop] && item[prop] !== "--") {
              otherArr.push(item);
            } else {
              nullArr.push(item);
            }
          });
          // this.previewTableData = [...otherArr,...nullArr]
          this.previewTableData = otherArr.sort((a, b) => {
              if ((a[prop] + "").includes("%") ||(b[prop] + "").includes("%")) {
                return a[prop].replace("%", "") - b[prop].replace("%", "");
              } else {
                return a[prop] - b[prop];
              }
          }).concat(nullArr);
          this.previewTableData.forEach((item, index) => {
            if (item.showcityname == "重庆") {
              this.previewTableData.splice(index, 1);
            }
          });
          if (!Object.keys(obj).length) return;
          this.previewTableData.unshift(obj);
        } else if (order == "desc") {
          this.previewTableData.forEach((item) => {
            if (item[prop] && item[prop] !== "--") {
              otherArr.push(item);
            } else {
              nullArr.push(item);
            }
          });
          // this.previewTableData = [...otherArr,...nullArr]
          this.previewTableData = otherArr
            .sort((a, b) => {
              if (
                (a[prop] + "").includes("%") ||
                (b[prop] + "").includes("%")
              ) {
                return b[prop].replace("%", "") - a[prop].replace("%", "");
              } else {
                return b[prop] - a[prop];
              }
            })
            .concat(nullArr);
          this.previewTableData.forEach((item, index) => {
            if (item.showcityname == "重庆") {
              this.previewTableData.splice(index, 1);
            }
          });
          if (!Object.keys(obj).length) return;
          this.previewTableData.unshift(obj);
        } else {
          // this.previewTableDataClone是在接口得到表格数据的时候拷贝了一份，用来还原取消排序时的表格数据
          this.$refs.maxTable.loadData(this.previewTableDataClone);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.elx-header--column.col--ellipsis > .elx-cell .elx-cell--title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}
</style>