el-table筛选数据

filter-multiple 是否开启多选
filters 筛选项
filter-method 筛选条件
filter-change 筛选条件改变时触发

  <!-- 表格部分 --><el-tableref="table":data="tableData"@filter-change="_filterChange"border><template v-for="(item, index) in dataList"><el-table-columnsortable:show-overflow-tooltip="true":key="index":label="item.label"align="center":prop="item.value":filter-multiple="true":filters="filterData(item)":filter-method="filterTag"></el-table-column></template></el-table>

1. filter-multiple

是否开启多选

2. filters

filters 接收一个数组对象，label是显示的文字，value是筛选时的数据

这里筛选项根据列表column循环生成的，你也可以手动生成

 //计算属性computed: {    // 筛选项filterData(){return function(data){let obj = [];//找到对应的数据 并添加到objthis.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);},

el-table筛选数据相关推荐

【Antd】Table组件数据重新渲染后筛选项如何清空
先来说一下我遇到的场景: 如上图,在点击操作按钮之后,会重新请求列表数据,列表数据更新.这个时候如果我先筛选了Age列, 再点击操作按钮更新数据会发现,列表上渲染的数据是经过筛选之后的,筛选项并没有被 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
JSP页面Table的数据拼接
系统业务需要表格table的数据,根据用户的选择来加载的 append()方法拼接元素 function selectAssayItem(el, id) {var sampBizModeId = ...
ant-design中对单个或多个table列表数据进行动态列合并
文章目录一. 实现效果二. 实现方法 2.1 版本:ant-design-vue:"^2.1.2" 2.2 方法:a-table组件里面的customCell功能 2.3 注意 ...
R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象
R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象目录 R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象 #data.t ...
R语言data.table导入数据实战：把data.frame数据转化为data.table数据
R语言data.table导入数据实战:把data.frame数据转化为data.table数据目录 R语言data.table导入数据实战:把data.frame数据转化为data.table数据 ...
R语言data.table导入数据实战:data.table使用by函数进行数据分组（aggregate）
R语言data.table导入数据实战:data.table使用by函数进行数据分组(aggregate) 目录 R语言data.table导入数据实战:data.table使用by函数进行数据分组( ...
R语言基于日期范围筛选数据实战（Subset by a Date Range）:日期范围之内的数据、日期范围之外的数据、日期之后的数据、日期之前的数据
R语言基于日期范围筛选数据实战(Subset by a Date Range):日期范围之内的数据.日期范围之外的数据.日期之后的数据.日期之前的数据目录 R语言基于日期范围筛选数据实战(Subse ...
R语言dplyr处理dataframe：使用mutate函数生成新的列、recode函数进行数据编码、rename函数重命名字段、arrange排序数据列、select筛选数据、filter过滤数据
R语言使用dplyr包处理dataframe数据:使用mutate函数生成新的数据列.recode函数进行数据编码.rename函数重命名字段.arrange函数对数据列内容排序.select筛选数据 ...

el-table筛选数据

el-table筛选数据相关推荐

最新文章

热门文章