ElementUI中Table表格实现筛选功能 并 获取筛选后的数量 |
您所在的位置：网站首页 › vue表格筛选 › ElementUI中Table表格实现筛选功能 并 获取筛选后的数量 |
|
一、table实现筛选功能
通过官网文档已知： filter-multiple 是否开启多选 filters 筛选项 filter-method 筛选条件 filter-change 筛选条件改变时触发表格部分 1. filter-multiple 是否开启多选 2. filters filters 接收一个数组对象，label是显示的文字，value是筛选时的数据 这里筛选项根据列表column循环生成的，你也可以手动生成 //计算属性 computed: { // 筛选项 filterData(){ return function(data){ let obj = []; //找到对应的数据 并添加到obj this.tableData.filter(item => { obj.push({ text:item[data.value], value:item[data.value] }) }) //因为column有重复数据，所以要进行去重 return this.deWeight(obj) } }, }, //方法 methods: { // 数组对象去重 deWeight(arr) { for (var i = 0; i < arr.length - 1; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i].text == arr[j].text) { arr.splice(j, 1); j--; } } } return arr; } },filterTag 这一步返回符合条件的数据 //返回符合条件的数据 // 参数分别是：选中的条件 、当前行 、当前列 filterTag(value, row, column) { const property = column['property']; return row[property] === value; },自此就能实现表头筛选功能了 二、筛选数据后获取筛选后的数量据我查找element好像没有提供这个功能，所以只能手动实现了。所幸element提供了一个方法：@filter-change 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组（注意执行时机） _filterChange() { this.totalSize = this.$refs.table.tableData.length; console.log(this.totalSize); }, 完整代码 export default { name: "App", data() { return { tableData: [ { name: "zml", age: 18, sex: "男" }, { name: "zml", age: 18, sex: "男" }, { name: "zml", age: 18, sex: "男" }, { name: "zml", age: 18, sex: "男" }, ], dataList: [ { label: "姓名", value: "name", }, { label: "年龄", value: "age", }, { label: "性别", value: "sex", }, ], }; }, //计算属性 computed: { // 筛选项 filterData() { return function (data) { let obj = []; //找到对应的数据 并添加到obj this.tableData.filter((item) => { obj.push({ text: item[data.value], value: item[data.value], }); }); //因为column有重复数据，所以要进行去重 return this.deWeight(obj); }; }, }, methods: { //返回符合条件的数据 // 参数分别是：选中的条件 、当前行 、当前列 filterTag(value, row, column) { const property = column["property"]; return row[property] === value; }, // 数组对象去重 deWeight(arr) { for (var i = 0; i < arr.length - 1; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i].text == arr[j].text) { arr.splice(j, 1); j--; } } } return arr; }, _filterChange() { this.totalSize = this.$refs.table.tableData.length; console.log(this.totalSize); }, }, }; |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |