官方文档中有详细的说明:在列中设置 sortable 属性即可实现以该列为基准的排序, 接受一个 Boolean,默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。 可以使用 sort-method 或者 sort-by 使用自定义的排序规则。
不过在使用这个属性的时候我们又会发现,有的时候会出现一些问题比如5大于10,这是因为排序的时候按照字符串去排序了,解决方法:
<el-table-column
sortable
:sort-method="
(a, b) => {
return a - b;
}
"
>
</el-table-column>
除此之外我们还可能遇到带百分符号或者是是其他特殊符号但是需要排序的情况,这个时候我们可以使用
<el-table-column
sortable
:sort-method="
(a, b) => {
return a.split('%')[0] - b.split('%')[0]
}
"
/>
还有一种情况就是数字和字符混合,比如一列数字中有一些显示为-,这样也会影响到排序的准确性,我们可以让-始终保持在排序的最上层或者最下层,方法为:
<el-table-column
sortable
:sort-method="
(a, b) => {
return isNaN(a[item.prop] * 1) ? -1 : isNaN(b[item.prop] * 1) ? 1 : a[item.prop] - b[item.prop];
}
"
/>