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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 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
德劲1107的电路分析与打磨
2021/03/02 无线电
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
python+mongodb数据抓取详细介绍
2017/10/25 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python搜索包的路径的实现方法
2019/07/19 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
对Python _取log的几种方式小结
2019/07/25 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
关于保护环境的建议书
2014/08/26 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
房产公证书
2015/01/23 职场文书
总账会计岗位职责
2015/04/02 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
任命书格式模板
2015/09/22 职场文书
2019个人半年工作总结
2019/06/21 职场文书