怎么在vue中利用element对table表格的动态列进行筛选-创新互联

怎么在vue中利用element对table表格的动态列进行筛选？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

实现代码：

HTML部分就是用一个多选框组件展示列选项
用v-if="colData[i].istrue"控制显示隐藏，把列选项传到checkbox里再绑定勾选事件。

            
	
		
	
	列表项展示筛选

	
		
		
		
		
		
		
	
	......

js 数据存放的data部分

//列表动态隐藏
	 colData: [
	   { title: "工号", istrue: true },
	   { title: "姓名", istrue: true },
	   { title: "年龄", istrue: true },
	   { title: "性别", istrue: true },
	   { title: "部门名称", istrue: true },	   
	 ],
	 checkBoxGroup: [],
	 checkedColumns: [],

js 方法实现部分

created() {      
	  // 列筛选
	  this.colData.forEach((item, index) => {
	    this.checkBoxGroup.push(item.title);
	    this.checkedColumns.push(item.title);
	  })
	  this.checkedColumns = this.checkedColumns
	  let UnData = localStorage.getItem(this.colTable)
	  UnData = JSON.parse(UnData)
	  if (UnData != null) {
	    this.checkedColumns = this.checkedColumns.filter((item) => {
	      return !UnData.includes(item)
	    })
	  }
	},
 // 监控列隐藏
 watch: {
   checkedColumns(val,value) {
     let arr = this.checkBoxGroup.filter(i => !val.includes(i)); // 未选中
     localStorage.setItem(this.colTable, JSON.stringify(arr))
     this.colData.filter(i => {
       if (arr.indexOf(i.title) != -1) {
         i.istrue = false;
       } else {
         i.istrue = true;
       }
     });
   }
 },

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联网站建设公司，的支持。