使用Element开发页面表格时,对某个字段做排序,并且对值为null的不做排序,放在最后。点击升序时,遇到个问题:后端返回的数据已经做了排序,前端拿到数据展示时把数据再排了一遍,我们要的结果直接拿后端排好序的数据使用。
问题如下:
代码如下:
<--!表格排序字段-->
<el-table-column sortable :sort-orders="['ascending', 'descending']"
prop="financeCost" label="融资成本%" align="center" min-width="100" show-overflow-tooltip>
</el-table-column>
点击升序,界面如下:
看似没问题,有几条数据值为null,翻到15页时,有一条数据为null的排到了前面,本应该在最后面。如下图:
第16页的数据的值是null,如图:
解决方法:
修改sortable属性值,原来的值为true,将值改为字符串custom,便不会将后端的数据再排序一次。
代码如下:
<--!表格排序字段-->
<el-table-column sortable="custom" :sort-orders="['ascending', 'descending']"
prop="financeCost" label="融资成本%" align="center" min-width="100" show-overflow-tooltip>
</el-table-column>
代码变化如下图:
页面结果变为正确了,null值的数据跑到最后一行,如下图: