[Vue] el-table的sort-change探究

DiracKeeko 发布于 5 月 17 日

如果 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...