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

 

 

 

 

 

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