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

最新推荐文章于 2025-09-10 02:08:54 发布

原创最新推荐文章于 2025-09-10 02:08:54 发布 · 6.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

vue 同时被 2 个专栏收录

35 篇文章

订阅专栏

javaScript

30 篇文章

订阅专栏

本文介绍了在Vue+ElementUI项目中如何实现表格的自定义排序规则，特别是在列包含下拉列表等特殊内容时，通过设置`sortable`属性为`custom`并结合`sort-change`事件来处理排序混乱的问题。示例代码展示了如何定义`sortFun`方法进行自定义比较，以及在`sort-change`事件中调用该方法更新表格数据。

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
    }
  }
}