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) => {
          let an = isNaN(parseFloat(a[this.current_data_type])) ? (this.order === 'descend' ? -99999999: 9999999): a[this.current_data_type]
          let bn = isNaN(parseFloat(b[this.current_data_type])) ? (this.order === 'descend' ? -99999999: 9999999): b[this.current_data_type]
          return an - bn
        },
      },
    ];

//this.current_data_type標識對象的key


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM