table表格排序，@sort-change=“sortChange“ 取消排序

   table表格排序，@sort-change="sortChange" 取消排序

点击的单个进行排序时,要求isAsc对应当前字段的排序顺序;值ascending,descending,null三种情况;若指定了列对应的prop,没有指定order的话,默认ascending; 

 

 desc降序，asc升序，当点升降序的时候，传空，执行列表方法。

  // 排序
        sortChange(e) {
            console.log(e, "e")
            if(e.order){
                this.sort_column = e.prop;
                this.sort_type = e.order == 'descending' ? 'desc' : 'asc';
            }else{
                this.sort_column =''
                this.sort_type = '';
            }
            this.pageIndex = 1;
            this.getDataList();
        },

table调用排序方法 @sort-change="sortChange"，调后端接口动态排序，sortable="custom"

  <el-table :data="dataList" border stripe @selection-change="selectionChangeHandle" @row-dblclick="detailsFun" @sort-change="sortChange"  max-height="550px" v-loading="dataListLoading">
            <el-table-column type="selection" align="center" header-align="center" width="50"></el-table-column>
            <el-table-column prop="code" label="编号" header-align="center" width="120" sortable="custom"
                show-overflow-tooltip></el-table-column>
            <el-table-column prop="user_name" label="业务经理" header-align="center" min-width="120" sortable="custom" show-overflow-tooltip>
            </el-table-column>            
        </el-table>

 

注意:

@sort-change 事件：表格的排序条件发生变化的时触发，参数 { column, prop, order }, 分别代表的意义是：

column：当前列

prop：当前列需要排序的数据

order：排序的规则（升序、降序和默认[默认就是没排序]）

 getSortList(arr) {
      let temArr = JSON.parse(JSON.stringify(arr))
      temArr.map(item => {
        item.prop = this.strChange(item.prop)
        item.order = item.order == 'descending' ? 'desc' : 'asc'
        return item
      })
      var str = ''
      for (var i = 0; i < temArr.length; i++) {
        str +=
          i === temArr.length - 1
            ? temArr[i].prop
            : temArr[i].prop + ' ' + temArr[i].order + ','
      }
      console.log(str)
      this.sortStr = str
      //调后端列表接口
    },

 

 

首先要明确一个问题，就是你使用的el-table组件是否是循坏渲染的，如果不是，直接在需要清除排序的地方调用element-ui中官网的一个方法即可解决，方法如下：

this.$refs.tablelist.clearSort() //只会清除最后点击的一项的高亮

当你的table组件是结合tabs组件被循环出来的时候，那么上面的方法使用时就会报错了，

     因为ref  tableList是一个数组，可以cosole.log打印一下看看即可。如果可以很方便的找到对应的index节点的话，使用

    this.$refs.tableList[index].clearSort()       即可清除排序解决

 天气炎热，码字实属不易，看看花心情凉快一下