element ui table表头动态筛选条件

本文主要实现：根据el-table表格数据自动生成表头筛选条件的方法，可根据表格数据动态调整。

el-table表格的表头增加筛选功能，大家平时都是怎么实现的呢？先看看官方文档的例子：

 1 <template>
 2   <el-button @click="resetDateFilter">清除日期过滤器</el-button>
 3   <el-button @click="clearFilter">清除所有过滤器</el-button>
 4   <el-table
 5     ref="filterTable"
 6     :data="tableData"
 7     style="width: 100%">
 8     <el-table-column
 9       prop="date"
10       label="日期"
11       sortable
12       width="180"
13       column-key="date"
14       :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'}]"
15       :filter-method="filterHandler"
16     >
17     </el-table-column>
18     <el-table-column
19       prop="name"
20       label="姓名"
21       width="180">
22     </el-table-column>
23     <el-table-column
24       prop="address"
25       label="地址"
26       :formatter="formatter">
27     </el-table-column>
28     <el-table-column
29       prop="tag"
30       label="标签"
31       width="100"
32       :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
33       :filter-method="filterTag"
34       filter-placement="bottom-end">
35       <template slot-scope="scope">
36         <el-tag
37           :type="scope.row.tag === '家' ? 'primary' : 'success'"
38           disable-transitions>{{scope.row.tag}}</el-tag>
39       </template>
40     </el-table-column>
41   </el-table>
42 </template>
43
44 <script>
45   export default {
46     data() {
47       return {
48         tableData: [{
49           date: '2016-05-02',
50           name: '王小虎',
51           address: '上海市普陀区金沙江路 1518 弄',
52           tag: '家'
53         }, {
54           date: '2016-05-04',
55           name: '王小虎',
56           address: '上海市普陀区金沙江路 1517 弄',
57           tag: '公司'
58         }, {
59           date: '2016-05-01',
60           name: '王小虎',
61           address: '上海市普陀区金沙江路 1519 弄',
62           tag: '家'
63         }, {
64           date: '2016-05-03',
65           name: '王小虎',
66           address: '上海市普陀区金沙江路 1516 弄',
67           tag: '公司'
68         }]
69       }
70     },
71     methods: {
72       resetDateFilter() {
73         this.$refs.filterTable.clearFilter('date');
74       },
75       clearFilter() {
76         this.$refs.filterTable.clearFilter();
77       },
78       formatter(row, column) {
79         return row.address;
80       },
81       filterTag(value, row) {
82         return row.tag === value;
83       },
84       filterHandler(value, row, column) {
85         const property = column['property'];
86         return row[property] === value;
87       }
88     }
89   }
90 </script>

其中的筛选条件：

: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'}]"

:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"

文档中的数据较少，这些筛选条件写起来并没有很复杂，但如果在数据量大的表格数据中，一个个手写的话，工作量将会很大，且也没有意义。下面我们将封装一个可根据数据自动生成筛选条件的方法！

首先我们得拿到表格当前页的数据，通过对数据的处理，来返回表头筛选数据。

 1 tableFilter(list){ // 传入表格数据
 2   let filters = {}
 3   if (list.length) {
 4     Object.keys(list[0]).forEach(item => { // 拿到第一条数据，将key值组成数组，并将key给filters对象作为键名，值为空数组
 5       filters[item] = []　　
 6     })
 7     list.forEach(item => { // 遍历表格的数据数组
 8       for (let key in item) { // 遍历数据数组的每一项(对象)
 9         if (filters.hasOwnProperty(key) && !filters[key].find(i => i.text == item[key])) { // 如果filters对象中有当前键名（它的值是数组）,并且该数组中不含当前值的对象
10           filters[key].push({text: item[key], value: item[key]}) // filters当前键名对应的值（数组），再push该值组成的对象（el-table筛选条件的格式）
11         }
12       }
13     })
14   }
15   return filters;
16 }

上面这段代码的主要干了这么一件事：拿到表格的所有数据，将数据中所有对象的键和值单独取出，做个归类，即filters对象中的键跟表格的每条数据的键是一致的，只不过filters的属性值是表格所有对象对应的属性值形成的数组！

js方法已经封装好，下面来看html代码怎么写：

 1 <el-table :data="pageGoods" border current-row-key empty-text="暂无数据" fit highlight-current-row size="mini" style="width: 100%;">
 2
 3   <el-table-column align="left" label="商品类别" width column-key="goodClass" prop="goodClass" sortable :filters="headFilters['goodClass']"
 4              :filter-method="filterHandler">
 5     <template slot-scope="scope">
 6       <span>{{ scope.row.goodClass }}</span>
 7     </template>
 8   </el-table-column>
 9   <el-table-column align="left" prop="similarGroup" label="商品类似群组" width column-key="similarGroup" sortable :filters="headFilters['similarGroup']"
10              :filter-method="filterHandler">
11     <template slot-scope="scope">
12       <span>{{ scope.row.similarGroup }}</span>
13     </template>
14   </el-table-column>
15   <el-table-column align="left" label="商品代码" width column-key="goodCode" prop="goodCode" sortable :filters="headFilters['goodCode']"
16              :filter-method="filterHandler">
17     <template slot-scope="scope">
18       <span>{{ scope.row.goodCode }}</span>
19     </template>
20   </el-table-column>
21   <el-table-column align="left" label="商品中文名称" width column-key="goodName" prop="goodName" sortable :filters="headFilters['goodName']"
22              :filter-method="filterHandler">
23     <template slot-scope="scope">
24       <span>{{ scope.row.goodName }}</span>
25     </template>
26   </el-table-column>
27   <el-table-column align="left" label="商品英文名称" width column-key="goodEnName" prop="goodEnName" sortable :filters="headFilters['goodEnName']"
28              :filter-method="filterHandler">
29     <template slot-scope="scope">
30       <span>{{ scope.row.goodEnName }}</span>
31     </template>
32   </el-table-column>
33
34   <el-table-column align="left" label="操作" width>
35     <template slot-scope="scope">
36       <el-button @click="delgood(scope.row)" type="text">删除</el-button>
37     </template>
38   </el-table-column>
39
40 </el-table>

以上代码中的 headFilters就是上面封装的方法tableFilter的返回值，哪一列需要过滤条件就直接在这个headFilters对象中取值==> :filters="headFilters['currentProp']"。

页面效果：

好像一切正常，实现了过滤的效果，可是当增加表格数据后，会出现一些问题：

发现问题了没，没错，表头筛选条件并没有增加，也就是说没有动态改变表头的条件！经过打印验证，表头的对象对应的属性值数组是有值的，那只有一种可能，表格的表头数据没有同步渲染出来！为了解决这个问题，我们可以给整个表格加一个key，这样表格数据变化的时候，可以及时的渲染出最新的表格。

<el-table :key="changeKey" :data="pageGoods" border current-row-key empty-text="暂无数据" fit highlight-current-row size="mini">

 1 getgoodsList (goods) {
 2   this.goodslistPageData.total = goods.length;
 3
 4   var offset =
 5     (this.goodslistPageData.pageNo - 1) * this.goodslistPageData.pageSize;
 6   this.pageGoods =
 7     offset + this.goodslistPageData.pageSize >= goods.length
 8       ? goods.slice(offset, goods.length)
 9       : goods.slice(offset, offset + this.goodslistPageData.pageSize);
10   this.headFilters = this.tableFilter(this.pageGoods)
11   this.changeKey = !this.changeKey
12   console.log(this.pageGoods);
13 },

当表格数据发生变化的时候，将表格的key值取反，这样就能保证每次数据变化，表格的key也会随之变化啦~ 再看效果：

以上数据都是一条条加进去的，筛选条件也会随之变化啦！至此，table表头过滤条件的方法封装已经全部实现，更多业务相关的方法封装，传送门：https://github.com/wangruibin666/wang-utils

脚踏实地行，海阔天空飞~