iView+vue实现多选框选择表格的列是否展⽰(动态表格)
1. 实现⽬标
全选时：
2. 实现过程
1. 复选框和Table的HTML如下：
watch checkboxVal，当选项改变时更改columns。
<Checkbox-group v-model="checkboxVal"@on-change="handleCheckboxChange">
服务质量差距模型<Checkbox v-for="optionCol in dynamicColOption":key="optionCol.key":label="optionCol.key">{{optionCol.title}}</Checkbox> </Checkbox-group>
<Table border:columns="columns":data="tabledata"></Table>
2.在data中声明，定义handleCheckboxChang：广西来宾一中
//最终要显⽰的列字段
columns:[],
checkboxVal:[],
//全部待选择的字段
dynamicColOption:[
{研发支出
title:'Name',
key:'name'
},
//....很长，不都写了
],
methods:
handleCheckboxChange(group){
//改变选项时记录在localstorage中，以便刷新时可以记住上次的选项
ls){
let obj =JSON.parse(localStorage['cols']);
//obj:{"cols":[]}
素女妙论
obj['cols']= group;
localStorage['cols']=JSON.stringify(obj);
}else{
let obj ={};
obj['cols']= group;
localStorage['cols']=JSON.stringify(obj);
}
},
3. 在create时，检查上次的选项
created(){
//给选择框赋初值，读取localstorage⾥的值奏鸣曲形式与交响乐各体裁的关系
if(localStorage['cols']){
let obj =JSON.parse(localStorage['cols'])
this.checkboxVal=obj['cols']
}else{
//默认情况下显⽰全部字段
for(let item of this.dynamicColOption){
this.checkboxVal.push(item.key);
mla}
}
}
this.loadData();
}
watch:{
/
/当下被选中字段的数组改变
checkboxVal(val){
//重置要显⽰的字段
//从全部待选项的{}，选出其中key是包含在被选中字段数组中的对象
let dynamicCol =this.dynamicColOption.filter(i => val.indexOf(i.key)>=0);
//向要显⽰的columns⾥添加该对象
for(let item of dynamicCol){
}
},
}
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议