elementui表格自定义筛选功能

1、子组件

方式1：用调接口的方式去筛选数据

<el-popover
v-model="isShowFilter"placement="right"width="400"trigger="click"><el-checkbox-group v-model="filterResVal"><el-checkbox :label="item.label" v-for="(item,index) in filterCondition" :key="index"></el-checkbox></el-checkbox-group><div class="el-table-filter__bottom"><button @click="filterTableData">筛选</button><button @click="isShowFilter = false">取消</button></div><span slot="reference"><i class="icon-filter"></i>     <!--筛选的icon--!>
</span>
</el-popover>

export default {name: 'tablefilter',props: ['filterCondition'], //filterCondition为筛选的条件从父组件传过来/*filterCondition的数据结构如下:[{key: 'apple0',label: '苹果0'},{key: 'apple1',label: '苹果1'},{key: 'apple2',label: '苹果2'},{key: 'apple3',label: '苹果3'}]*/data () {isShowFilter: false,    //控制隐藏过滤弹窗filterResVal: [],           //存储选项值filterResKey: []     //存储筛选值的key值，用于调接口时传参},methods: {this.filterResKey = [];   //每次筛选重置筛选选项值this.filterCondition.forEach(item => {if(this.filterResVal.length) {this.filterResVal.forEach(items => {if(item === items.label) {this.filterResKey.push(item.key);}})}});let value= '';if(this.filterResKey.length) {value = this.filterResKey.join(',');}this.isShowFilter = false;this.$emit('filteredData',value);  //将选项值转为字符串传给父组件}
}

2、父组件

<el-tableref="filterTable":data="tableData"style="width: 100%"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址":formatter="formatter"></el-table-column><el-table-columnprop="tag"width="100"><!--重点看这里，在筛选的那一列加入筛选的子组件，并且这里一定要写下面的带有slot=header slot-scope={}的span标签，不写的话，筛选的弹窗是点不出来的，手动【捂脸】--!><span slot="header" slot-scope="{}">水果<tablefilter :filterCondition="filterFruitList" @filteredData="filterFruitData" v-if="filterFruitList.length"></tablefilter></span></el-table-column></el-table>

//为了方便，我这里只写主要部分代码
import tablefiler from 'tablefilter.vue';
export default {data () {filterFruitList: [{key: 'apple0',label: '苹果0'},{key: 'apple1',label: '苹果1'},{key: 'apple2',label: '苹果2'},{key: 'apple3',label: '苹果3'}]},methods: {filterFruitData (data) {//data即为子组件传过来的值,之后就请求接口然后控制el-table表格中的data属性就行了........}},components: {tablefilter}
}

elementui表格自定义筛选功能相关推荐

Element-UI 表格自定义序号列
Element-UI 表格自定义序号列注:el-table-column可通过type="index" 设置为表格序号列,但是设置label属性无效 <el-table : ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
Select 选择器自定义筛选功能（支持简拼\全拼\汉字搜索）
引入formate.js import formate from "util/formate"; formate.js: /*** Created by zhouli on 201 ...
Vxe-table表格自定义筛选
vue2自定义类型需求:需要搜索筛选复选框在src/components新建FilterExtend.vue,内容如下 <template><div class="my ...
element-plus ui表格表头筛选功能
目的:对有筛选功能的项,选中选择项后,点击确定,筛选参数值变更,调查询接口查询数据要点:@filter-change + column-key <template><div> ...
elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱
elementui表格根据指定相同属性值合并单元格 josn数据,id相同的单元格合并,前3column和后7column合并 let arr = [ {"op":"Su ...
vue elementui 表格搜索筛选栏组件封装
1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项.表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,且多人开发情况下每个人写的样式都不相同,布局样式无法统一. ...
腾讯会议考勤方法-巧用EXCEL表格的筛选功能及countif函数
当前由于疫情,网络会议的使用变得很普遍,由此出现网络会议的考勤问题,尤其是人数较多的会议,考勤成为一个繁琐耗时的问题,比如几十人甚至上百人的上课考勤.笔者经过实践探索,找到一种快捷准确的考勤方法(本方 ...
vue+elementUI表格关键字筛选高亮
 <div class="screen"> <div style="width:30%">筛选:< ...

elementui表格自定义筛选功能

1、子组件

2、父组件

elementui表格自定义筛选功能相关推荐

最新文章

热门文章