element的表格index自定义_UI组件库表格排序功能

今天来给表格组件加上排序功能&＃xff0c;对比了 Element 和 iView 后决定功能和样式参考 Element&＃xff0c;事件先暂实现一个 sort-change。

一、组件调用时的设置

// 增加 sortable 属性&＃xff0c;其值可选 true / false / &＃39;custom&＃39;[ { type: "selection", width: 60, align: "center" }, { type: "index", width: 60, align: "center" }, { title: "姓名", key: "name", width: 120 }, { title: "年龄", key: "age", width: 70, sortable: "custom" }, { title: "地址", key: "address" }, { title: "注册日期", key: "date", sortable: "custom" },]// 表格组件中&＃xff0c;监听 sort-change 事件// 事件处理函数doSort(key, order) { console.log(key, order);}

二、表格组件内的修改

具体的逻辑分享的时候已经交代的很清楚了&＃xff0c;提醒大家注意的是这里的逻辑要分别考虑到到表格固定表头和不固定表头的情况&＃xff0c;代码如下&＃xff1a;

{{column.title}}

要注意的点&＃xff1a;

1. 排序的逻辑是点击表头排序(不同于iView)&＃xff0c;默认情况不排序&＃xff0c;点击一次正序&＃xff0c;第二次倒序&＃xff0c;第三次不排序&＃xff0c;依次类推
2. 要考虑本页面排序和远程排序的情况
3. 为了正确表示排序状态&＃xff0c;我们需要把正在排序的列记录下来&＃xff0c;否则会引起其它可排序列状态同步变化(&＃xff01;)
4. 触发父组件事件&＃xff0c;并传递父组件排序必须参数(要排序的字段和顺序)
5. 为了不占表头高度&＃xff0c;并且简单起见&＃xff0c;排序指示器用了绝对定位&＃xff0c;大家可以按实际情况取舍

下图是未固定表头情况下的排序情况(滚动条可以区分)&＃xff1a;

END&＃xff0c;祝编程愉快&＃xff01;:)