el-table表格进行排序 & 清除排序和清除排序箭头的高亮图标_el-table排序

el-table表格进行排序 & 清除排序和清除排序箭头的高亮图标

1、进行排序

效果图

代码

<template>
  <el-table
    ref="filterTable"
    :data="tableData"
    border
    :max-height="maxHeight"
    :highlight-current-row="true"
    @row-dblclick="rowDblClick"
    @sort-change="changeTableSort"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}"
    >
    <el-table-column
      prop="date"
      label="日期"
      :sortable="'custom'"
      show-overflow-tooltip
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        maxHeight: 460px,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      async rowDblClick(row) {
         consologe.log('双击获取当前行信息',row)   
      },
    //排序触发事件
    changeTableSort({order}) {
      if (order === 'ascending') {
        this.tableData.sort((a, b)=> a.name.localeCompare(b.name, 'zh')); //a~z 排序
      } if (order === 'descending') {
        this.tableData.sort((a, b)=> b.name.localeCompare(a.name, 'zh')); //z~a 排序
      }
    },
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。

• sortable ： 对应列是否可以排序，如果设置为 ‘custom’，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件。字符串/布尔值，true, false, ‘custom’ 默认false
• default-sort ： 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序。 对象类型。order: ascending-升序, descending-降序。如果只指定了prop, 没有指定order, 则默认顺序是ascending。

注释

• row-dblclick ： 当某一行被双击时会触发该事件， 参数 (row, column, event)
• border ： 是否带有纵向边框 ，布尔值，默认false
• max-height ： Table 的最大高度。合法的值为数字或者单位为 px 的高度。 字符串/数字类型 ， —
• sort-change ： 当表格的排序条件发生变化的时候会触发该事件 ，参数 { column, prop, order }

2、清除排序和清除排序箭头的高亮图标

排序后，切换日期或其他条件重新渲染表格数据，这时候需要去除排序箭头高亮样式

两步解决以上问题

1、第一步：增加ref=“table1”

<el-table
     :row-class-name="tableRowClassName"
     :data="resultAreaList1"
     style="width: 100%"
     @sort-change="changeTableSort1($event)"
     ref="table1"
>
1
2
3
4
5
6
7

2、第二步，clearSort（如果表格用了v-if控制，先判断一下表格是否存在）

if (this.$refs.table1) {
     this.$refs.filterTable.clearSort(); // 清除排序
     this.$refs.filterTable.columnConfig.order = '';  // 清除排序高亮图标
}
1
2
3
4

注：

不管是el-table自带的排序还是远程排序，使用官方文档中的clearSort方法都无法去除排序的高亮效果。只能通过把el-table-column组件中的columnConfig的order字段设置为空才能清除高亮。