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

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

10年积累的成都做网站、成都网站设计、成都外贸网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有淮南免费网站建设让你可以放心的选择与我们合作。

实现代码：

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

<el-popover placement="right" title="列筛选" trigger="click" width="420">            
	<el-checkbox-group v-model="checkedColumns" size="mini">
		<el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
	</el-checkbox-group>
	<el-button slot="reference" type="primary" size="small" plain><i class="el-icon-arrow-down el-icon-menu" />列表项展示筛选</el-button>
</el-popover>

<el-table :data="attendanceList" @sort-change="sort" highlight-current-row :row-class-name="holidayRow" @selection-change="editAll" ref="multipleTable">
	<el-table-column type="selection" width="55" align="center"></el-table-column>
		<el-table-column label="员工基本信息">
		<el-table-column v-if="colData[0].istrue" align="center" prop="user_id" label="工号" width="80" fixed></el-table-column>
		<el-table-column v-if="colData[1].istrue" align="center" prop="name" label="姓名" width="80" fixed></el-table-column>
		<el-table-column v-if="colData[2].istrue" align="center" prop="age" label="年龄" width="60"></el-table-column>
		<el-table-column v-if="colData[3].istrue" align="center" prop="gender" label="性别" width="80"></el-table-column>
		<el-table-column v-if="colData[4].istrue" align="center" prop="department" label="部门名称" width="100"></el-table-column>
	</el-table-column>
	......

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;
       }
     });
   }
 },

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

新闻名称：怎么在vue中利用element对table表格的动态列进行筛选-创新互联
网站网址：https://www.cdcxhl.com/article42/esgec.html

成都网站建设公司_创新互联，为您提供品牌网站设计、网站设计公司、外贸网站建设、网站导航、关键词优化、微信小程序

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联