使用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值的數據跑到最後一行,如下圖: