1. 程式人生 > 其它 >ant design vue table 排序

ant design vue table 排序

背景:官方和網上的例子都很簡單,實際專案開發中比較的一般都是物件陣列,且屬性值不一定全為數值,有可能為字串,比如某個資料沒有值,預設顯示字串:"--"

需求:降序或者升序無數值的在最後面顯示

開發步驟:

(1)HTML:<a-table @change='compare' :columns='columns'>

(2)methods:

compare(pagination,filters,sorter,{currentDataSource}){ this.order=sorter.order }, (3)data: order:"", columns :[ { title:"序號", dataIndex:"id", key:"id", }, { title:"站點資訊", dataIndex:"station", key:"station", }, { dataIndex:"", slots:{title:"current_data_type_name"},//標題,current_data_type_name為變數 scopedSlots:{customRender:"name"},//用於每行資料顯示 sorter:(a,b)=>{ letan=isNaN(parseFloat(a[this.current_data_type]))?(this.order==='descend'?-99999999:9999999):a[this.current_data_type] letbn=isNaN(parseFloat(b[this.current_data_type]))?(this.order==='descend'?-99999999:9999999):b[this.current_data_type] returnan-bn }, }, ];

//this.current_data_type標識物件的key