使用Element开发页面表格排序问题:排序时带上了null值(直接展示后端返回排好的数据)

使用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值的数据跑到最后一行,如下图:

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章