element-ui table排序sortable三種狀態,去掉null默認狀態


經常會遇到遠程排序,需要去掉null狀態的排序,當設置sortable='custom'時,設置sort-orders為['ascending', 'descending']是不生效的。
然后查到了一種解決辦法,如下:

按照上面這種方式在指對某一列進行排序時是沒有問題的,但如果需要多行進行排序,在多次點擊時,就會出現如下情況:

主要是為當你點擊某一列的排序為null時,改變了column.order和order,然后點擊不同列的時候,前一列的排序並沒有被清空。可以通過this.$refs.table.columns查看前一行的order

解決思路就是當前order為null時,記錄下當前prop,然后下一列排序,如果當前prop與之前prop不相同,則清除上一次的order,代碼如下

data() {
      return {
        prevSort: 'descending', // 保存之前的排序狀態
        prevProp: 'date' // 保存上一次為null時的prop
      }
}
sortChange({ column, prop, order }) {
        if (order !== null && this.prevProp !== prop) {
          let columns = this.$refs.table.columns.find(x => x.property === this.prevProp);
          columns.order = '';
        }
        if (order === null) {
          column.order = this.saveSort === 'descending' ? 'ascending' : 'descending';
          this.prevProp = prop;
        }
        this.saveSort = column.order;
 }

參考博文:https://blog.csdn.net/qq_40876719/article/details/101626514


免責聲明!

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



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