添加排序箭头

教学视频

目标

要实现的效果如下图所示：

可以看到，在点击列表排序时会在列头以箭头形式标明当前列排序方式，向下箭头表示正序，向下箭头表示倒序。

实现方法：通过在列头添加条件渲染实现列表箭头的动态显示。

实现

首先根据 多列头点击排序 一节介绍，任意选择一种方法实现一个可以点击列表排序的例子，接下来只需要排序时在列头添加箭头即可。

分别选中A1、B1、C1单元格，在其属性面板的渲染标签页中添加两个条件渲染项。

1.A1单元格的条件渲染项

第一个条件渲染项

在这个条件渲染项当中，我们加了两个条件，两个条件要同时满足才能执行新值这个具体的渲染操作，第一个条件是判断参数order值是否为asc；第二个条件是判断fieldName参数是否等于EMPLOYEE_ID，如果两个条件都满足，那么对当前单元格执行新值这个具体的条件渲染动作，新值中我们输入的表达式为："↓"+#，表示值为一个向下的箭头加上当前单元格的值（#表示当前单元格值）。

第二个条件渲染项

和第一个相比，区别在于判断order参数是不是等于desc，另一个条件相同，如果条件满足，执行新值的表达式为"↑"+#，为一个向上箭头加上当前单元格值。

2.B1单元格的条件渲染项

第一个条件渲染项

和A1单元格的条件渲染项基本相同，唯一不同之处就是B1单元格判断fieldName参数是否等于EMPLOYEE_NAME，其它都相同。

3.C1单元格的条件渲染项

第一个条件渲染项

和A1单元格的条件渲染项基本相同，唯一不同之处就是B1单元格判断fieldName参数是否等于SALARY，其它都相同。

保存预览，可以看预期效果。