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

在这里插入图片描述
点击清除后:
在这里插入图片描述
而重置可以重置到初始状态。使用el-tablesort方法。
重置前:
在这里插入图片描述
重置后:
在这里插入图片描述
代码如下:

<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>

<style>

</style>

官方文档方法:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐