elementui表格自定义筛选功能

最新推荐文章于 2024-08-20 09:45:52 发布

益达木咸醇

最新推荐文章于 2024-08-20 09:45:52 发布

阅读量2.4k

点赞数 1

分类专栏：前端 javascript 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_45766506/article/details/119036397

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue中创建一个子组件用于表格数据的筛选。子组件通过`el-popover`展示筛选条件，使用`el-checkbox-group`让用户选择过滤项，并在筛选后将选中的值发送给父组件。父组件接收筛选后的值并调用接口更新表格数据。博客内容涉及到Vue组件通信、事件监听和表格数据处理。

摘要由CSDN通过智能技术生成

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-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="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
	}
}