iview+vue实现多选框选择表格的列是否展示

iView+vue实现多选框选择表格的列是否展示(动态表格)

1. 实现目标

   全选时：

   改变选项后：不显示相应的列

2. 实现过程

   1. 复选框和Table的HTML如下：

      watchcheckboxVal，当选项改变时更改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 style="margin-top: 10px" border :columns="columns" :data="tabledata"></Table>
   

   2.在data中声明，定义handleCheckboxChang：

   //最终要显示的列字段
    columns:[],
    //当下被选中的字段的数组
    checkboxVal:[],
    //全部待选择的字段
    dynamicColOption: [
        {
            title: 'Name',
            key: 'name'
        },
    //....很长，不都写了
    ],
   

   methods:
    handleCheckboxChange(group){
         //改变选项时记录在localstorage中，以便刷新时可以记住上次的选项
         if(localStorage.cols){
           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);
         }
       }
       this.loadData();
     }
   

     watch:{
     //当下被选中字段的数组改变
       checkboxVal (val) {
       //重置要显示的字段
         this.columns = [];
         //从全部待选项的{}，选出其中key是包含在被选中字段数组中的对象
         let dynamicCol = this.dynamicColOption.filter(i => val.indexOf(i.key) >= 0);
         //向要显示的columns里添加该对象 
         for (let item of dynamicCol) {
           this.columns.push(item);
         }
       },
     }