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

详细代码：

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_district = false;}

//判断地址显示或隐藏

if(localStorage.show_address == 'true'){this.show_address = true;this.showaddress = true;}else{this.showaddress = false;this.show_address = false;}

//判断客户来源显示或隐藏

if(localStorage.show_source == 'true'){this.show_source = true;this.showsource = true;}else{this.showsource = false;this.show_source = false;}

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

if(localStorage.show_intimacy == 'true'){this.show_intimacy = true;this.showintimacy = true;}else{this.showintimacy = false;this.show_intimacy = false;}

//判断创建人显示或隐藏

if(localStorage.show_createor == 'true'){this.show_createor = true;this.showcreateor = true;}else{this.showcreateor = false;this.show_createor = false;}

//判断标签显示或隐藏

if(localStorage.show_label == 'true'){this.show_label = true;this.showlabel = true;}else{this.showlabel = false;this.show_label = false;}

//判断协同人显示或隐藏

if(localStorage.show_synergy == 'true'){this.show_synergy = true;this.showsynergy = true;}else{this.showsynergy = false;this.show_synergy = false;}

//判断首次付款时间显示或隐藏

if(localStorage.show_first == 'true'){this.show_first = true;this.showfirst = true;}else{this.showfirst = false;this.show_first = false;}

//判断最后跟进时间显示或隐藏

if(localStorage.show_last == 'true'){this.show_last = true;this.showlast = true;}else{this.showlast = false;this.show_last = false;}

//判断跟新时间显示或隐藏

if(localStorage.show_update == 'true'){this.show_update = true;this.showupdate = true;}else{this.showupdate = false;this.show_update = false;}

//判断创建时间显示或隐藏

if(localStorage.show_create == 'true'){this.show_create = true;this.showcreate = true;}else{this.showcreate = false;this.show_create = false;}

//判断客户类型显示或隐藏

if(localStorage.show_type == 'true'){this.show_type = true;this.showtype = true;}else{this.showtype = false;this.show_type = false;}

//判断RFM指数显示或隐藏

if(localStorage.show_rfm == 'true'){this.show_rfm = true;this.showrfm = true;}else{this.showrfm = false;this.show_rfm = false;}

//判断市显示或隐藏

if(localStorage.show_city == 'true'){this.show_city = true;this.showcity = true;}else{this.showcity = false;this.show_city = false;}

}else{

this.firstlocaldata();

}

},

判断点击设置按钮中的复选框，选中展示，不选中就隐藏

//表单数据展示与隐藏设置

showHide : function(show){

switch(show){

case 'show_brand' : if(this.show_brand == false){localStorage.setItem("showbrand",true);localStorage.setItem("show_brand",true); this.showbrand = true;return this.show_brand = true;}else{localStorage.setItem("showbrand",false);localStorage.setItem("show_brand",false);this.showbrand = false;return this.show_brand = false;}

break;

case 'show_deposit' :if(this.show_deposit === false){localStorage.setItem("showdeposit","true");localStorage.setItem("show_deposit","true");this.showdeposit = true;return this.show_deposit = true;}else{

localStorage.setItem("showdeposit","false");localStorage.setItem("show_deposit","false");

this.showdeposit = false; return this.show_deposit = false;}

break;

case 'show_cooperation' : if(this.show_cooperation === false){localStorage.setItem("showcooperation","true");localStorage.setItem("show_cooperation","true");this.showcooperation = true; return this.show_cooperation = true;}else{localStorage.setItem("showcooperation","false");localStorage.setItem("show_cooperation","false");this.showcooperation = false;return this.show_cooperation = false;}

break;

case 'show_name' : if(this.show_name === false){localStorage.setItem("showname","true");localStorage.setItem("show_name","true");this.showname = true;return this.show_name = true;}else{localStorage.setItem("showname","false");localStorage.setItem("show_name","false");this.showname = false;return this.show_name = false;}

break;

case 'show_tel' : if(this.show_tel === false){localStorage.setItem("showtel","true");localStorage.setItem("show_tel","true");this.showtel = true;return this.show_tel = true;}else{localStorage.setItem("showtel","false");localStorage.setItem("show_tel","false");this.showtel = false;return this.show_tel = false;}

break;

case 'show_level' : if(this.show_level === false){localStorage.setItem("showlevel","true");localStorage.setItem("show_level","true");this.showlevel = true;return this.show_level = true;}else{localStorage.setItem("showlevel","false");localStorage.setItem("show_level","false");this.showlevel = false;return this.show_level = false;}

break;

case 'show_status' : if(this.show_status === false){localStorage.setItem("showstatus","true");localStorage.setItem("show_status","true");this.showstatus = true;return this.show_status = true;}else{localStorage.setItem("showstatus","false");localStorage.setItem("show_status","false");this.showstatus = false;return this.show_status = false;}

break;

case 'show_importance' : if(this.show_importance === false){localStorage.setItem("showimportance","true");localStorage.setItem("show_importance","true");this.showimportance = true;return this.show_importance = true;}else{localStorage.setItem("showimportance","false");localStorage.setItem("show_importance","false");this.showimportance = false;return this.show_importance = false;}

break;

case 'show_province' : if(this.show_province === false){localStorage.setItem("showprovince","true");localStorage.setItem("show_province","true");this.showprovince = true;return this.show_province = true;}else{localStorage.setItem("showprovince","false");localStorage.setItem("show_province","false");this.showprovince = false;return this.show_province = false;}

break;

case 'show_district' : if(this.show_district === false){localStorage.setItem("showdistrict","true");localStorage.setItem("show_district","true");this.showdistrict = true;return this.show_district = true;}else{localStorage.setItem("showdistrict","false");localStorage.setItem("show_district","false");this.showdistrict = false;return this.show_district = false;}

break;

case 'show_address' : if(this.show_address === false){localStorage.setItem("showaddress","true");localStorage.setItem("show_address","true");this.showaddress = true;return this.show_address = true;}else{localStorage.setItem("showaddress","false");localStorage.setItem("show_address","false");this.showaddress = false;return this.show_address = false;}

break;

case 'show_source' : if(this.show_source === false){localStorage.setItem("showsource","true");localStorage.setItem("show_source","true");this.showsource = true;return this.show_source = true;}else{localStorage.setItem("showsource","false");localStorage.setItem("show_source","false");this.showsource = false;return this.show_source = false;}

break;

case 'show_intimacy' :if(this.show_intimacy === false){localStorage.setItem("showintimacy","true");localStorage.setItem("show_intimacy","true");this.showintimacy = true;return this.show_intimacy = true;}else{localStorage.setItem("showintimacy","false");localStorage.setItem("show_intimacy","false");this.showintimacy = false;return this.show_intimacy = false;}

break;

case 'show_createor' :if(this.show_createor === false){localStorage.setItem("showcreateor","true");localStorage.setItem("show_createor","true");this.showcreateor = true;return this.show_createor = true;}else{ localStorage.setItem("showcreateor","false");localStorage.setItem("show_createor","false");this.showcreateor = false;return this.show_createor = false;}

break;

case 'show_label' : if(this.show_label === false){localStorage.setItem("showlabel","true");localStorage.setItem("show_label","true");this.showlabel = true;return this.show_label = true;}else{localStorage.setItem("showlabel","false");localStorage.setItem("show_label","false");this.showlabel = false;return this.show_label = false;}

break;

case 'show_synergy' : if(this.show_synergy === false){localStorage.setItem("showsynergy","true");localStorage.setItem("show_synergy","true");this.showsynergy = true; return this.show_synergy = true;}else{localStorage.setItem("showsynergy","false");localStorage.setItem("show_synergy","false");this.showsynergy = false;return this.show_synergy = false;}

break;

case 'show_first' : if(this.show_first === false){localStorage.setItem("showfirst","true");localStorage.setItem("show_first","true");this.showfirst = true;return this.show_first = true;}else{localStorage.setItem("showfirst","false");localStorage.setItem("show_first","false"); this.showfirst = false; return this.show_first = false;}

break;

case 'show_last' : if(this.show_last === false){localStorage.setItem("showlast","true");localStorage.setItem("show_last","true"); this.showlast = true;return this.show_last = true;}else{localStorage.setItem("showlast","false");localStorage.setItem("show_last","false");this.showlast = false;return this.show_last = false;}

break;

case 'show_update' : if(this.show_update === false){localStorage.setItem("showupdate","true");localStorage.setItem("show_update","true");this.showupdate = true; return this.show_update = true;}else{localStorage.setItem("showupdate","false");localStorage.setItem("show_update","false");this.showupdate = false;return this.show_update = false;}

break;

case 'show_create' : if(this.show_create === false){localStorage.setItem("showcreate","true");localStorage.setItem("show_create","true");this.showcreate = true;return this.show_create = true;}else{localStorage.setItem("showcreate","false");localStorage.setItem("show_create","false");this.showcreate = false;return this.show_create = false;}

break;

case 'show_type' :if(this.show_type === false){localStorage.setItem("showtype","true");localStorage.setItem("show_type","true");this.showtype = true;return this.show_type = true;}else{localStorage.setItem("showtype","false"); localStorage.setItem("show_type","false");this.showtype = false;return this.show_type = false;}

break;

case 'show_rfm' : if(this.show_rfm === false){localStorage.setItem("showrfm","true");localStorage.setItem("show_rfm","true"); this.showrfm = true;return this.show_rfm = true;}else{localStorage.setItem("showrfm","false");localStorage.setItem("show_rfm","false");this.showrfm = false;return this.show_rfm = false;}

break;

case 'show_city' : if(this.show_city === false){localStorage.setItem("showcity","true");localStorage.setItem("show_city","true");this.showcity = true;return this.show_city = true;}else{localStorage.setItem("showcity","false");localStorage.setItem("show_city","false"); this.showcity = false; return this.show_city = false;}

break;

}

},