本文主要实现:根据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
脚踏实地行,海阔天空飞~