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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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 disk_free_space 返回目录可用空间
2010/05/10 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
input 高级限制级用法
2009/03/26 Javascript
chrome原生方法之数组
2011/11/30 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
js如何打印object对象
2015/10/16 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
利用python发送和接收邮件
2016/09/27 Python
简单谈谈Python中的闭包
2016/11/30 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Django视图类型总结
2021/02/17 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
致800米运动员广播稿
2014/02/16 职场文书
国培计划培训感言
2014/03/11 职场文书
端午节演讲稿
2014/05/23 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
开幕式邀请函
2015/01/31 职场文书
留学推荐信中文范文
2015/03/26 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis