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

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

1、进行排序

效果图

代码

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字段设置为空才能清除高亮。