本文主要實現：根據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
腳踏實地行，海闊天空飛~