element ui +vue table组件实现按列筛选

需求: 根据鼠标移动在按钮时出现popover弹出框以checkbox形式展现表格中所有的列（table label）。用户可在checkbox中选中所要展示的列。

官网是对表格行数据进行筛选，我们要对列进行筛选

<template>
<el-popover placment="top" width="150" trigger="hover">
	<el-checkbox-group v-model="checkList">
		<el-checkbox v-for="(item,index) in allList" :label="item.label" :key="index"/>
	</el-checkbox-group>
	 <el-button slot="reference" type="primary" size="mini"/>
 </el-popover>
</template>

<script>
export default{
          
   
	data(){
          
   
		checkList:[], // checkbox 
		allList:[] // 存放所有label
		tableLabel:[] // 表格label
	},
	// 监听筛选列表
	watch:{
          
   
		checklist:{
          
   
			handler(val) {
          
   
				this.tabelLabel = this.allList.filter(item => {
          
   
					return val.indexOf(item.label) > -1
				}
			}
		}
	}
	created(){
          
   
	// 初始化表格筛选
	this.allList = JSON.parse(JSON.stringify(this.tableLabel))// 深拷贝
	this.getCheckList()
	}
	methods:{
          
   
		// 所有checkbox被选中状态
		getCheckList() {
          
   
			this.tableLabel.forEach(element => {
          
   
				this.checkList.push(element.label)
			}
		}
	}
}
</script>

感兴趣的小伙伴可以自己封装成组件使用~