共计 1086 个字符，预计需要花费 3 分钟才能阅读完成。
如果 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…