1、子组件
方式1：用调接口的方式去筛选数据
<el-popoverv-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}}
