el-table设置默认筛选

1.初始化设置默认筛选项

如element文档示例所示，默认会显示所有项，即没有做任何的筛选

那么如何按默认的设置筛选，比如默认按‘家’筛选呢？ 方法：设置filtered-value

2.当el-table数据更新，需要重新设置筛选条件，如何设置筛选呢？

这种情况我们发现如果数据更新，重新设置this.filteredVal=['公司']，并不起任何作用，还是会按原来设置的‘家’筛选 此时点击更新数据按钮后应该这样做 这样就设置成功了

3.示例代码

 * @Author: your name
 * @Date: 2021-04-09 13:51:38
 * @LastEditTime: 2021-04-09 15:38:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bdb06\src\views\taCheng\test.vue
-->
<template>
  <div class="app-container">
    <el-button @click="resetDateFilter">清除日期过滤器</el-button>
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    <el-button @click="updateData">更新数据</el-button>
    <el-table ref="filterTable" :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" sortable width="180" column-key="date"
       :filters="[
       {text: '2016-05-01', value: '2016-05-01'}, 
       {text: '2016-05-02', value: '2016-05-02'},
       {text: '2016-05-03', value: '2016-05-03'}, 
       {text: '2016-05-04', value: '2016-05-04'}]"
       :filter-method="filterHandler">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址" :formatter="formatter">
      </el-table-column>
      <el-table-column prop="tag" label="标签" width="100" 
      :filters="[
      { text: '家', value: '家' }, 
      { text: '公司', value: '公司' }]" 
      :filter-method="filterTag" 
      :filtered-value="filteredVal" 
      filter-placement="bottom-end">
      <template slot-scope="scope"> 
        <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        tag: '家'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        tag: '公司'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        tag: '家'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        tag: '公司'
      }],
      filteredVal: ['家']
    }
  },
  methods: {
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    updateData() {
      this.tableData = [{
        date: '2016-05-02',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1518 弄',
        tag: '家'
      }, {
        date: '2016-05-04',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1517 弄',
        tag: '公司'
      }, {
        date: '2016-05-01',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1519 弄',
        tag: '家'
      }, {
        date: '2016-05-03',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1516 弄',
        tag: '公司'
      }]
      //   this.filteredVal=['公司'] //更新数据后重新设置筛选值不起作用
      
      let refs=this.$refs.filterTable,column = refs.columns[refs.columns.length - 1]
      refs.columns[refs.columns.length - 1].filteredValue = ['公司'];
      refs.store.commit('filterChange', {
        column,
        values: column.filteredValue,
        silent: true
      })
    }
  }
}
</script>
<style scoped>
.app-container {
  padding: 20px;
}
</style>