vue 表格重置和清除

elementUI组件表格排序的重置与清除

点击清除后： 而重置可以重置到初始状态。使用el-table 的sort方法。

代码如下：

<template>
  <div id="rank">
      <el-button @click="resetTable">重置排序</el-button>
      <el-button @click="clearTable">清除排序</el-button>
      <el-table
      ref="tableList"
      :data="tableData"
      style="width: 100%"
      :default-sort = "{prop: 'date', order: 'descending'}"
      >
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :formatter="formatter">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'rank',
  data(){
    return {
      tableData: [{
          date: '2016-05-02',
          age: '11',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          age: '12',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          age: '13',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          age: '14',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
  },
  methods:{
    formatter(row, column) {
      return row.address;
    },
    resetTable(){
      this.$refs.tableList.sort('date','descending')
    },
    clearTable(){
      this.$refs.tableList.clearSort()
    }
  }
}
</script>

参考

https://element.eleme.cn/#/zh-CN/component/table#pai-xu https://blog.csdn.net/weixin_42566993/article/details/107945714