ant design vue table 排序
阿新 • • 發佈:2021-08-05
背景:官方和網上的例子都很簡單,實際專案開發中比較的一般都是物件陣列,且屬性值不一定全為數值,有可能為字串,比如某個資料沒有值,預設顯示字串:"--"
需求:降序或者升序無數值的在最後面顯示
開發步驟:
(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