elementUI取消sort-change中間的取消狀態,只保留descending和ascending


在工作中我們總會碰到奇奇怪怪的需求,比如我就碰到了取消elementUI  sort-change狀態為null的需求,話不多說直接上代碼

html代碼:

<el-table :data="tableData" style="width:100%" fit @sort-change = "sortChange" ref="table"> 
</el-table>
 
vue代碼:

data(){

  return {    

    prevProp: prop, //記錄前一次的prop值,

    prevSort: 'descending'//記錄前一次的排序狀態(elementUI默認有三種,即descending,ascending和null)

  }

}

methods: {

  sortChange({column, prop, order}) {//接收三個參數,分別是當前列的所有屬性值,當前列的prop, 當前列的排序狀態

            if (order !== null && this.prevProp !== prop) {
                    var columns = this.$refs.table.columns.find(item => item.property === this.prevProp);//這里需要注意的是需要給el-table加一個ref屬性
      //如果是elementUI表格會有columns屬性,並且該屬性下包含property屬性,不理解的同學可以在控制台打印一下康康
                    columns.order = '';
            }
            if (order === null) {
                column.order = this.prevSort === 'descending' ? 'ascending' : 'descending';
                this.prevProp = prop;
            }
   //實現取消null狀態的功能后就可以在下面愉快的的玩耍啦~
          //dosomething

}

}


免責聲明!

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



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