Vue Table 表格列筛选，前端筛选与后端筛选的写法

对表格进行筛选，可快速查找到自己想看的数据

数据过滤的逻辑有两个方向，以下针对两个方向进行说明：

前端过滤

<template>
  <div>
    <el-table :data="tableData"  style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        :filters="nameFilters"
        :filter-method="filterName"
        :filter-multiple="false">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      nameFilters: [{ text: '张三', value: '10001' }], // 存储姓名筛选选项
    };
  },
  mounted() {
    // 初始化数据
    this.fetchData();
    // 获取姓名筛选选项
    this.fetchNameFilters();
  },
  methods: {
    // 从接口获取表格数据
    async fetchData(filter = {}) {
    },
    // 筛选姓名的方法
    filterName(value, row, column) {
        console.log(value, row, column)
        const property = column['property'];
        return row[property] === value;
    }
  }
};
</script>

前端筛选主要用到的有两个属性， filters ， filter-method

filters 存储数据的筛选的选项
filter-multiple 数据过滤的选项是否多选
filter-method 方法会遍历每一行数据，有多少条数据就会执行多少次，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。

• 前端过滤，其逻辑就是通过 filter-method 方法，遍历每一条数据，看看每条数据是否符合筛选，如果为
  true，则数据显示。就这么简单。
• 单选筛选是每条数据都执行一次，多选筛选，是每条都会执行多次，然后都去匹配筛选项，看看是否能匹配。

后端过滤

<template>
	<el-table :data="list" class="border-gray" @filter-change="changefilter">
	    <el-table-column prop="islock" label="门店状态"
	     :filters=islockOptions 
	     :filter-multiple="false" 
	     column-key="islock">
	        <template slot-scope="scope">
	            <el-tag type="success" v-if="scope.row.islock == 0">启用</el-tag>
	            <el-tag type="danger" v-if="scope.row.islock == 1">禁用</el-tag>
	        </template>
	    </el-table-column>
	   
	    <el-table-column prop="hangye" label="行业" 
	    :filters=hangyeOptions 
	    column-key="hangye">
	    </el-table-column>
	   
	</el-table>
</template>

<script>
	export default {
		data() {
	        return {
	            list: [],
	            fliterData:{
	            	"islock":"",
	            	"hangye ":"",
	            	"teamscale":""
	            },
	            islockOptions: [{ text: '启用', value: '0' }, { text: '禁用', value: '1' }],
	            hangyeOptions: [],
	        };
	    },
	    methods: {
	        getList(){
		        getShopList({
	                islock: this.fliterData.islock,
	                hangye: this.fliterData.hangye,
	                teamscale: this.fliterData.teamscale,
	            }).then(response => {
	                this.list = response.data.list;
	                this.pageParam.total = response.data.total;
	                this.loading = false;
	            });
	        },
		    // 过滤
	        changefilter(filters) {
	            if (filters.islock) {
	                this.fliterData.islock = filters.islock[0];
	            }
	            if (filters.hangye) {
	                this.fliterData.hangye = filters.hangye.join(",");
	            }
	            if (filters.teamscale) {
	                this.fliterData.teamscale = filters.teamscale.join(",");
	            }
	            this.getList();
	        },
	    }
	}
</script>

后端筛选其实就是将参数传到接口，通过后端的接口进行筛选
主要用到的有两个属性， filters ， column-key, filter-change

filters 存储数据的筛选的选项
filter-multiple 数据过滤的选项是否多选
column-key 设置筛选参数的字段名，filter-change 返回的key不是自动生成的而是设置的column-key的值
filter-change 方法是table 的属性，只会执行一次，当表格的筛选条件发生变化的时候会触发该事件。

• 后端筛选 就是 通过 触发 filter-change 事件，将筛选参数记录下来，然后一起传到后端接口，进行接口筛选。

常见问题：

• column-key 参数不设置，我打印下就清楚了。

  不设置 column-key 的参数，这时你知道你搜索的是哪个参数吗，不知道。
  

  设置后的情况，这时是不是一目了然了，知道是筛选哪个字段。
  

多次尝试，测试，理解其逻辑，其实就是各个属性的拼凑。