elementuitable表头动态筛选条件

elementuitable表头动态筛选条件
本⽂主要实现：根据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() {
47return {
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() {
73this.$refs.filterTable.clearFilter('date');
74 },
75 clearFilter() {
76this.$refs.filterTable.clearFilter();
77 },
78 formatter(row, column) {
79return row.address;
80 },
81 filterTag(value, row) {
82return row.tag === value;
83 },
84 filterHandler(value, row, column) {
85 const property = column['property'];
86return 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 = {}
3if (list.length) {
4 Object.keys(list[0]).forEach(item => { // 拿到第⼀条数据，将key值组成数组，并将key给filters对象作为键名，值为空数组
5 filters[item] = []
6 })
7 list.forEach(item => { // 遍历表格的数据数组
8for (let key in item) { // 遍历数据数组的每⼀项(对象)
9if (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 }
15return 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) {
2this.goodslistPageData.total = goods.length;
3
4var offset =
5 (this.goodslistPageData.pageNo - 1) * this.goodslistPageData.pageSize;
6this.pageGoods =
7 offset + this.goodslistPageData.pageSize >= goods.length
8 ? goods.slice(offset, goods.length)
9 : goods.slice(offset, offset + this.goodslistPageData.pageSize);
10this.headFilters = this.tableFilter(this.pageGoods)
11this.changeKey = !this.changeKey
12 console.log(this.pageGoods);
13 },
当表格数据发⽣变化的时候，将表格的key值取反，这样就能保证每次数据变化，表格的key也会随之变化啦~ 再看效果：
以上数据都是⼀条条加进去的，筛选条件也会随之变化啦！⾄此，table表头过滤条件的⽅法封装已经全部实现，更多业务相关的⽅法封装，：脚踏实地⾏，海阔天空飞~。