element-ui clear table sort All In One

element-ui clear table sort All In One

切换市场，先清除排序，再刷新数据 （即，请求参数中不携带 sort 字段）

  <el-table
    ref="filterTable1"
    :data="tableData1"
    @sort-change="sortChange"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
  <hr />

  <el-button @click="clearSort">清除所有排序</el-button>

var Main = {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王2虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王4虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王1虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王3虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    computed: {
      tableData1 () {
        return this.tableData;
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      sortChange (obj) {
        console.log('sort obj', obj);
        // column
        // order: "descending"
        // prop: "name"
        // 清除 sort
        // 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序
      },
      clearSort() {
        console.log('this.$refs.filterTable1', this.$refs.filterTable1);
        this.$refs.filterTable1.clearSort();
        // this.$refs.filterTable1.clearSort('date');
        // this.$refs.filterTable1.clearSort('name');
      },
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

demo

API

https://element.eleme.io/#/zh-CN/component/table#pai-xu

https://element.eleme.io/#/zh-CN/component/table#table-column-attributes

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---