vue+elementui 项目 table表格自定义排序规则

vue+elementui 项目 table表格自定义排序规则

官方解释：
在列中设置 sortable 属性即可实现以该列为基准的排序，接受一个 Boolean，默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。可以使用 sort-method 或者 sort-by 使用自定义的排序规则。如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

其实前端排序要使用自定义排序规则也可以将 table 的 el-table-column 标签上 sortable 属性设置为 custom，要不然在排序一些特殊内容的时候就会出现乱象，比如：排序的列都是下拉列表的时候，就会出现乱象问题

<el-table-column
   :label="tableItemConfig.label"
   :min-width="tableItemConfig.width"
   align="center"
   :prop="tableItemConfig.prop"
   sortable="custom"
>

在 el-table 标签上绑定 sort-change 事件

<el-table
   ref="table"
   :data="tablePageData"
   :show-header="tableConfig.isShowHeader ? tableConfig.isShowHeader : true"
   :border="tableConfig.isShowBorder"
   :style="tableConfig.tableStyle"
   :header-cell-style="tableConfig.headerCellStyle"
   :row-style="tableRowStyle"
   @sort-change="sort_change"
>

methods: {
  sort_change(column) {
	this.tablePageData= this.tablePageData.sort(sortFun(column.prop, this.searchDataOrder))
  },

  // attr 参数表示当前点击的是哪一列，传进来的是点击列的标识
  // rev 参数表示的是点击当前列表头之后是升序降序或者null，三种值分别是['ascending', 'descending', null]
  sortFun = (attr, rev) => {
    if(rev === 'ascending') {
      rev = 1
    } else if (rev === 'descending') {
      rev = -1
    } else {
      rev = 0
    }
    return function (x, y) {
      let a = x[attr]
      let b = y[attr]
      if (!a) {
        a = ""
      }
      if (!b) {
        b = ""
      }
      if (a < b) {
        return rev * -1
      }
      if (a > b) {
        return rev * 1
      }
      return 0
    }
  }
}