乐趣区

关于vue.js:Vue-eltable的sortchange探究

如果 el-table-column(表中的某一列)开启了 sortable,会在表头上呈现一个高低箭头图标。

这个点击图标会触发排序事件。咱们暂且把它称为 el-table 的原生排序。

(察看这个排序,它不影响 el-table(用:data)绑定的 tableData,它影响的是 ElTableBody 外面的数据,排序后 tableData 的 dataArray 和 ElTableBody 的 dataArray 二者数组外部元素程序不统一)

el-table 原生排序是很笨的。就是一般的数组 sort,sort 对字符串比拟、有 undefined 的比拟会产生与咱们预期不统一的后果。官网也思考到了这一点,因而容许咱们在 el-table 上利用 sort-change 事件自定义比拟函数。

如果 el-table 开启了 sort-change 那么 sort-change 指定的 compareFunction 会取代 el-table 的原生排序。

(再察看这个排序,它影响 el-table(:data)绑定的 tableData,也会影响 ElTableBody 外面的数据,排序后 tableData 的 dataArray 和 ElTableBody 的 dataArray 元素程序都会扭转,保持一致)

(下面所说的察看,办法是用 chrome 插件 vueTools,查看绑定值。没有这个插件,只用 vue 的 watch,深度监听 tableData,察看变动,也能阐明问题)

如果 el-table-column 开启了 sortable,那么 el-table 原生排序 和 sort-change
必然会触发一个。(必然会触发,且肯定会二选一)

要强调二者必触发其一。
对 el-table 进行二次封装的时候,这里咱们把封装好的组件称为 CustomizedTable,在应用 CustomizedTable 且某一列开启了 sortable,是在 CustomizedTable 层面自定义排序事件,对传入组件的 tableData 排序实现之后再传入组件外部。此时 sort-change 事件没有触发,那么最终点击高低箭头图标进行排序的时候,组件层面曾经实现排序的数据会被 el-table 的原生排序再排序一次,相当于曾经排好序的数据,被 sort 再排了一次,sort 这么笨的排序,后果就很 emm 了。

倡议对 el-table 进行二次封装的时候,给一个开关定义 sort-change 是否开启,把 compareFunction 写在 CustomizedTable 组件外部,自定义排序在组件外部进行,防止 sort。

搬运自本人的语雀
https://www.yuque.com/diracke…

退出移动版