vue+element table表格实现动态列筛选的示例代码


Posted in Vue.js onJanuary 14, 2021

需求:在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,用户使用起来可能会觉得抓不住自己的重点。

设想实现:用户手动选择表格的列隐藏还是展示,并且记录用户选择的状态,在下次进入该时仍保留选择的状态。

效果图如下:

原:

vue+element table表格实现动态列筛选的示例代码

不需要的关掉默认的勾选:

vue+element table表格实现动态列筛选的示例代码

实现代码:
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表格实现动态列筛选的示例代码的文章就介绍到这了,更多相关element table表格动态列筛选内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue 递归组件的简单使用示例
Jan 14 #Vue.js
vue element和nuxt的使用技巧分享
Jan 14 #Vue.js
vue动态设置路由权限的主要思路
Jan 13 #Vue.js
vue组件是如何解析及渲染的?
Jan 13 #Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 #Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 #Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 #Vue.js
You might like
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python递归实现汉诺塔算法示例
2018/03/19 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python处理“
2019/06/10 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
电子商务应届生自我鉴定
2014/01/13 职场文书
迟到检讨书1000字
2014/01/15 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
2014年党支部承诺书
2014/05/30 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js