vue 使用element-ui实现table表单列展示与隐藏

本文介绍如何在Vue项目中使用Element-UI动态设置table表单列的显示与隐藏。根据用户的选择,利用localStorage存储和读取表单列的显示状态,实现了表单列的动态展示和隐藏功能。
摘要由CSDN通过智能技术生成

详细代码:

github上查看方式

查看窗口

在公司做vue 动态设置element中table表单列的展示方式,点击复选框选中时,表单对应的显示,补选中时,隐藏,因为在网上找相关案例,没有一个比较合适的解决方法,所以自己按照自己的方法去实现此相关功能,希望对大家有帮助。


页面table表单对应的展示与隐藏

首次默认把需要展示的数据保存到浏览器的localstroang中

页面加载localstroang保存的数据

//请求刘篮球的localstrong中的数据

localdata : function(){

//this.firstlocaldata(); //设置首次展示的数据

if(localStorage.length>0){

//判断品牌机会显示或隐藏

if(localStorage.show_brand == 'true'){this.show_brand = true;this.showbrand = true;}else{this.show_brand = false;this.showbrand = false;}

//判断保证金显示或隐藏

if(localStorage.show_deposit == 'true'){this.show_deposit = true;this.showdeposit = true;}else{this.show_deposit = false;this.showdeposit = false;}

//判断合作平台显示或隐藏

if(localStorage.show_cooperation == 'true'){this.show_cooperation = true;this.showcooperation = true;}else{this.show_cooperation = false;this.showcooperation = false;}

//判断联系人显示或隐藏

if(localStorage.show_name == 'true'){this.show_name = true;this.showname = true;}else{this.showname = false;this.show_name = false;}

//判断合作品牌显示或隐藏

if(localStorage.show_brand == 'true'){this.show_brand = true;this.showbrand = true;}else{this.showbrand = false;this.show_brand = false;}

//判断联系电话显示或隐藏

if(localStorage.show_tel == 'true'){this.show_tel = true;this.showtel = true;}else{this.showtel = false;this.show_tel = false;}

//判断客户级别显示或隐藏

if(localStorage.show_level == 'true'){this.show_level = true;this.showlevel = true;}else{this.showlevel = false;this.show_level = false;}

//判断客户级别显示或隐藏

if(localStorage.show_status == 'true'){this.show_status = true;this.showstatus = true;}else{this.showstatus = false;this.show_status = false;}

//判断主要程度显示或隐藏

if(localStorage.show_importance == 'true'){this.show_importance = true;this.showimportance = true;}else{this.showimportance = false;this.show_importance = false;}

//判断省显示或隐藏

if(localStorage.show_province == 'true'){this.show_province = true;this.showprovince = true;}else{this.showprovince = false;this.show_province = false;}

//判断县显示或隐藏

if(localStorage.show_district == 'true'){this.show_district = true;this.showdistrict = true;}else{this.showdistrict = false;this.show_

评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值