奥非域

el-table排序实现(数值排序)

el-table排序,如果仅设置sortable或sortable="true",排序效果并不友好,特别是数值排序,应该如下实现:

<el-table 中设置 @sort-change="handleSort"
<el-table-column 中设置 sortable="custom"
methods 添加事件 handleSort(e) ,代码如下:
    handleSort(e) {
      // console.log(111, e)
      if (e.order == 'descending') {
        // console.log(111, '降序')
        this.tableData = this.tableData.sort((a, b) => b[e.prop] - a[e.prop])
      } else if (e.order == 'ascending') {
        // console.log(111, '升序')
        this.tableData = this.tableData.sort((a, b) => a[e.prop] - b[e.prop])
      }
    },
This.tableData 是表格对应的数据源,对应的也可以改成带排序参数从后台接口里获取数据。