el-table列筛选filter-method多次调用问题

filter-method

filter-method： 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。

<template>
  <div class="app-container">
    <el-table-column
        prop="type" sortable
        width="180" column-key="type"
        :filters="[{ text: 'AP', value: '1' },
        { text: 'AC', value: '2' },
        { text: $t('Gateway'), value: '3' },
        { text: $t('Switch'), value: '4' },
        { text: 'CAP', value: '5' },
        { text: $t('Controller'), value: '6' },
        { text: 'MESH', value: '7' }]"
        :filter-method="filterHandler">
    </el-table-column>
  </div>
</template>
<script>
export default {
  methods:{
    filterHandler(value, row, column) {
      console.log(value)
    }
  }
}
</script>

在console.log中打印出来，我们可以看到每次筛选都会打印出很多条数据，表格有多少条数据就会打印出多少次，说明filter-method方法会遍历每一行数据，方法里面的操作有多少条数据就会执行多少次。

filter-method会遍历执行多次，可以用于前端筛选

filter-change

如果我们根据用户筛选条件进行后台数据获取，我们可以使用filter-change方法

filter-change：当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。

<template>
  <div class="app-container">
  <el-table  @filter-change="filterHandler">
    <el-table-column
        prop="type" sortable
        width="180" column-key="type"
        :filters="[{ text: 'AP', value: '1' },
        { text: 'AC', value: '2' },
        { text: $t('Gateway'), value: '3' },
        { text: $t('Switch'), value: '4' },
        { text: 'CAP', value: '5' },
        { text: $t('Controller'), value: '6' },
        { text: 'MESH', value: '7' }]">
    </el-table-column>
  </el-table>
  </div>
</template>
<script>
export default {
  methods:{
    filterHandler(column) {
      console.log(column)
    }
  }
}
</script>

在console.log中打印出来，只会打印一次，说明filter-change方法只会执行一次，我们可以在这里进行后台数据获取。
filter-method会执行一次，可以用于后台数据筛选
常见问题：
el-table列筛选时filter-change无法知道是哪一列:
给筛选的列属性加上 column-key ，从而filter-change返回的key不是自动生成的而是设置的column-key的值

注： el-table-column属性filter-multiple可以设置过滤多选或者单选