vue+iview 动态表头全选功能

需求:
1.动态表头分个人信息、工作信息、教育信息三个模块
2.每个小模块都有全选按钮
3.点击每个模块下的子checkbox 表格里的列根据表头顺序插入
(例如:中文名 英文名 证件类型 此时插入性别
排序如下:中文名 英文名 性别 证件类型)

效果图:

实现:
1.动态表头

<!-- 动态表头 -->
<Collapse>
     <Panel name="1">
         <span style="font-size:13px;font-weight:600;">动态表头</span>
         <template slot="content">
             <div v-for="(items,key) in dynamicHeaderList" :key="key">
                 <Row style="margin-bottom:10px;padding-top:10px;">
                     <Col span="2" class="topTitle">{{items.title}}</Col>
                     <Col span="22">
                         <Checkbox :indeterminate="items.indeterminate" :value="items.checkAll" @on-change="handleCheckAll(items.list,items)">全选</Checkbox>
                         <CheckboxGroup v-model="items.columnList" @on-change="checkAllGroupChange(items)">
                             <Checkbox v-for="(item,index) in items.list" :key="index" :label="item.id" style="width:15%;">{{item.title}}</Checkbox>
                         </CheckboxGroup> 
                     </Col>
                 </Row>
             </div>
         </template>
     </Panel>
 </Collapse>

2.初始化

data () {
   return {
        // 动态表头数组
        dynamicIdList:[],
        tableColumnsChecked:[],
        dynamicHeaderList:[
        {
            title:'个人信息',
            indeterminate:true,
            checkAll:false,
            columnList:[0,1,4,5,6],
            list:[{ 
                title:'中文名',
                name:'nameCh',
                id:0
            },{ 
                title:'英文名',
                name:'nameEn',
                id:1
            },{ 
                title:'性别',
                name:'sexDesc',
                id:2
            },{ 
                title:'生日',
                name:'birthday',
                id:3
            },{ 
                title:'证件类型',
                name:'certificateTypeDesc',
                id:4
            },{ 
                title:'证件号码',
                name:'identificationNumber',
                id:5
            },{ 
                title:'联系电话',
                name:'phone',
                id:6
            },{ 
                title:'个人邮箱',
                name:'personalEmail',
                id:7
            },{ 
                title:'微信号',
                name:'wechatNumber',
                id:8
            },{ 
                title:'国家地区',
                name:'unitedKingdomDesc',
                id:9
            },{ 
                title:'民族',
                name:'nation',
                id:10
            },{ 
                title:'政治面貌',
                name:'politicsStatusDesc',
                id:11
            },{ 
                title:'籍贯',
                name:'nativePlace',
                id:12
            },{ 
                title:'是否已婚',
                name:'marriedDesc',
                id:13
            },{ 
                title:'生育情况',
                name:'ifPregnantDesc',
                id:14
            },{ 
                title:'现居住地',
                name:'currentAddress',
                id:15
            },{ 
                title:'户籍性质',
                name:'householdTypeDesc',
                id:16
            },{ 
                title:'户籍城市',
                name:'householdCity',
                id:17
            },{ 
                title:'户籍地址',
                name:'householdAddress',
                id:18
            },{ 
                title:'参加工作时间',
                name:'workingTime',
                id:19
            },{ 
                title:'主要紧急联系人姓名',
                name:'emergencyContactName',
                id:20
            },{ 
                title:'主要紧急联系人电话',
                name:'emergencyContactPhone',
                id:21
            },{ 
                title:'工资卡卡号',
                name:'payrollCardNumber',
                id:22
            },{ 
                title:'工资卡开户城市',
                name:'payrollCardCity',
                id:23
            },{ 
                title:'银行名称',
                name:'bankName',
                id:24
            },{ 
                title:'个人社保账号',
                name:'socialSecurityAccount',
                id:25
            },{ 
                title:'个人公积金账号',
                name:'providentFundAccount',
                id:26
            }] 
        },
        {
            title:'工作信息',
            indeterminate:true,
            checkAll:false,
            columnList:[28,29,31,33],
            list:[{ 
                title:'工号',
                name:'jobNumber',
                id:27
            },{ 
                title:'部门',
                name:'departmentDesc',
                id:28
            },{ 
                title:'员工状态',
                name:'stateDesc',
                id:29
            },{ 
                title:'工作性质',
                name:'jobCategoryDesc',
                id:30
            },{ 
                title:'工作邮箱',
                name:'workEmail',
                id:31
            },{ 
                title:'分机号码',
                name:'ext',
                id:32
            },{ 
                title:'职务',
                name:'positionDesc',
                id:33
            },{ 
                title:'职级编号',
                name:'rankNumberDesc',
                id:34
            },{ 
                title:'职级名称',
                name:'rankNumberName',
                id:35
            },{ 
                title:'汇报上级',
                name:'superiorLeaderName',
                id:36
            },{ 
                title:'合同公司',
                name:'companyContractDesc',
                id:37
            },{ 
                title:'合同类型',
                name:'contractTypeDesc',
                id:38
            },{ 
                title:'合同到期时间',
                name:'expirationDateContract',
                id:39
            },{ 
                title:'合同签订次数',
                name:'numberContractsSigned',
                id:40
            },{ 
                title:'入职日期',
                name:'datesEmployed',
                id:41
            },{ 
                title:'转正日期',
                name:'positiveDate',
                id:42
            },{ 
                title:'社保起始月',
                name:'socialSecurityStartingMonth',
                id:43
            },{ 
                title:'离职时间',
                name:'resignationTime',
                id:44
            },{ 
                title:'离职类型',
                name:'resignationTypeDesc',
                id:45
            },{ 
                title:'离职原因',
                name:'resignationReason',
                id:46
            }]
        },
        {
            title:'教育信息',
            indeterminate:true,
            checkAll:false,
            columnList:[],
            list:[{ 
                title:'最高学历',
                name:'educationBackgroundDesc',
                id:47
            },{ 
                title:'毕业院校',
                name:'academy',
                id:48
            },{ 
                title:'毕业专业',
                name:'specialty',
                id:49
            },{ 
                title:'教育开始时间',
                name:'educationStartDate',
                id:50
            },{ 
                title:'毕业时间',
                name:'graduationDate',
                id:51
            },{ 
                title:'毕业证书编号',
                name:'certificateNumber',
                id:52
            },{ 
                title:'学位证书编号',
                name:'diplomaNumber',
                id:53
            },{ 
                title:'学习形式',
                name:'studyModeDesc',
                id:54
            },{ 
                title:'学位类型',
                name:'degreeTypeDesc',
                id:55
            }]
        }],
        columns:[
        {
            title: '中文名',
            key: 'nameCh',
            fixed:'left',
            width:160
        },
        {
            title: '英文名',
            key: 'nameEn',
            width:160
        },
        {
            title: '性别',
            key: 'sexDesc',
            width:160
        },
        {
            title: '生日',
            key: 'birthday',
            width:160
        },
        {
            title: '证件类型',
            key: 'certificateTypeDesc',
            width:160
        },
        {
            title: '证件号码',
            key: 'identificationNumber',
            width:160
        },
        {
            title: '联系电话',
            key: 'phone',
            width:160
        },
        {
            title: '个人邮箱',
            key: 'personalEmail',
            width:160
        },
        {
            title: '微信号',
            key: 'wechatNumber',
            width:160
        },
        {
            title: '国家地区',
            key: 'unitedKingdomDesc',
            width:160
        },
        {
            title: '民族',
            key: 'nation',
            width:160
        },
        {
            title: '政治面貌',
            key: 'politicsStatusDesc',
            width:160
        },
        {
            title: '籍贯',
            key: 'nativePlace',
            width:160
        },
        {
            title: '是否已婚',
            key: 'marriedDesc',
            width:160
        },
        {
            title: '生育情况',
            key: 'ifPregnantDesc',
            width:160
        }, 
        {
            title: '现居住地',
            key: 'currentAddress',
            width:160
        },
        {
            title: '户籍性质',
            key: 'householdTypeDesc',
            width:160
        },
        {
            title: '户籍城市',
            key: 'householdCity',
            width:160
        },
        {
            title: '户籍地址',
            key: 'householdAddress',
            width:160
        },
        {
            title: '参加工作时间',
            key: 'workingTime',
            width:160
        },
        {
            title: '主要紧急联系人姓名',
            key: 'emergencyContactName',
            width:160
        },
        {
            title: '主要紧急联系人电话',
            key: 'emergencyContactPhone',
            width:160
        },
        {
            title: '工资卡卡号',
            key: 'payrollCardNumber',
            width:160
        },
        {
            title: '工资卡开户城市',
            key: 'payrollCardCity',
            width:160
        },
        {
            title: '银行名称',
            key: 'bankName',
            width:160
        },
        {
            title: '个人社保账号',
            key: 'socialSecurityAccount',
            width:160
        },
        {
            title: '个人公积金账号',
            key: 'providentFundAccount',
            width:160
        },
        {
            title: '工号',
            key: 'jobNumber',
            sortable: true,
            width:160
        },
        {
            title: '部门',
            key: 'departmentDesc',
            sortable: true,
            width:160
        },
        {
            title: '员工状态',
            key: 'stateDesc',
            width:160
        },
        {
            title: '工作性质',
            key: 'jobCategoryDesc',
            width:160
        },
        {
            title: '工作邮箱',
            key: 'workEmail',
            width:160
        },
        {
            title: '分机号码',
            key: 'ext',
            width:160
        },
        {
            title: '职务',
            key: 'positionDesc',
            width:160
        },
        {
            title: '职级编号',
            key: 'rankNumberDesc',
            width:160
        },
        {
            title: '职级名称',
            key: 'rankNumberName',
            width:160
        },
        {
            title: '汇报上级',
            key: 'superiorLeaderName',
            width:160
        },
        {
            title: '合同公司',
            key: 'companyContractDesc',
            width:160
        },
        {
            title: '合同类型',
            key: 'contractTypeDesc',
            width:160
        },
        {
            title: '合同到期时间',
            key: 'expirationDateContract',
            width:160
        },
        {
            title: '合同签订次数',
            key: 'numberContractsSigned',
            width:160
        },
        {
            title: '入职日期',
            key: 'datesEmployed',
            sortable: true,
            width:160
        },
        {
            title: '转正日期',
            key: 'positiveDate',
            width:160
        },
        {
            title: '社保起始月',
            key: 'socialSecurityStartingMonth',
            width:160
        },
        {
            title: '离职时间',
            key: 'resignationTime',
            width:160
        },
        {
            title: '离职类型',
            key: 'resignationTypeDesc',
            width:160
        },
        {
            title: '离职原因',
            key: 'resignationReason',
            width:160
        },
        {
            title: '最高学历',
            key: 'educationBackgroundDesc',
            width:160
        },
        {
            title: '毕业院校',
            key: 'academy',
            width:160
        },
        {
            title: '毕业专业',
            key: 'specialty',
            width:160
        },
        {
            title: '教育开始时间',
            key: 'educationStartDate',
            width:160
        },
        {
            title: '毕业时间',
            key: 'graduationDate',
            width:160
        },
        {
            title: '毕业证书编号',
            key: 'certificateNumber',
            width:160
        },
        {
            title: '学位证书编号',
            key: 'diplomaNumber',
            width:160
        },
        {
            title: '学习形式',
            key: 'studyModeDesc',
            width:160
        },
        {
            title: '学位类型',
            key: 'degreeTypeDesc',
            width:160
        },
        {
            title: '操作',
            fixed:'right',
            slot: 'delete',
            width:240
        }]
    }
}

3.计算属性

computed: {
   // 动态表头
    filterColumns() {
        const columns = [...this.columns];
        const filterColumns = [columns[columns.length-1]];
        this.dynamicIdList=[];
        for(var i=0;i<this.dynamicHeaderList.length;i++){
            this.dynamicHeaderList[i].columnList.sort((old,New)=>{
                return old - New;
            }).forEach(item => {
                filterColumns.push(columns[item]);
            });
            this.dynamicHeaderList[i].columnList.forEach(each => {
                this.dynamicIdList.push(each)
            })
        }
        this.tableColumnsChecked=[];
        for(var n=0;n<this.dynamicHeaderList.length;n++){
            for(var m=0;m<this.dynamicHeaderList[n].list.length;m++){
                for(var l=0;l<this.dynamicIdList.length;l++){
                    if(this.dynamicHeaderList[n].list[m].id==this.dynamicIdList[l]){
                        this.tableColumnsChecked.push(this.dynamicHeaderList[n].list[m].name)
                    }
                }
                
            }
        }
        return filterColumns;
    }
}

4.方法

/************************* 动态表头 *******************************/ 
// 全选
  handleCheckAll (arr,items) {
      if (items.indeterminate) {
          items.checkAll = false;
      } else {
          items.checkAll = !items.checkAll;
      }

      if (arr.length == 0){
          items.checkAll = false;
      }
      if (arr .length > 0 && items.indeterminate){
          items.checkAll = true;
      }

      items.indeterminate = false;
      let singleCheckedGroup = []
      let singleObj = {}
      if (!Array.isArray(arr)) {
          return
      }
            
      for (let i = 0; i < arr.length; i++) {
          singleObj = arr[i]
          singleCheckedGroup.push(singleObj.id)
      }
      
      if (items.checkAll) {
          items.columnList=singleCheckedGroup;
      } else {
          items.columnList = [];
      }
  },
  checkAllGroupChange(items){
      if (items.columnList.length === items.list.length) {
          items.indeterminate = false;
          items.checkAll = true;
      } else if (items.columnList.length > 0) {
          items.indeterminate = true;
          items.checkAll = false;
      } else {
          items.indeterminate = false;
          items.checkAll = false;
      }
  }