Table table sorting, @sort-change="sortChange" cancel sorting

   Table sorting, @sort-change="sortChange" cancel sorting

When sorting the single clicked, isAsc is required to correspond to the sorting order of the current field; the values ​​are ascending, descending, and null; if the prop corresponding to the column is specified, and the order is not specified, ascending is the default; 

 

 desc descending order, asc ascending order, when clicking descending order, pass empty, and execute the list method.

  // 排序
        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 calls the sorting method @sort-change="sortChange", adjusts the dynamic sorting of the backend interface, 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>

 

Notice:

@sort-change event: Triggered when the sorting condition of the table changes, the meanings of the parameters { column, prop, order } are:

column: current column

prop: the data that needs to be sorted in the current column

order: sorting rules (ascending, descending and default [the default is not sorted])

 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
      //调后端列表接口
    },

 

 

First of all, you need to clarify a problem, that is, whether the el-table component you use is rendered in a cycle. If not, you can directly call a method on the official website of element-ui where the sorting needs to be cleared. The method is as follows:

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

When your table component is combined with the tabs component to be cycled out, then the above method will report an error when used.

     Because ref tableList is an array, you can print it in console.log. If you can easily find the corresponding index node, use

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

 The weather is hot, code words are not easy, look at the flowers to cool down