vue+element表单动态生成多级栏目的checkbox全选与部分选择

1.代码

<template>
  <div class="home">
    <el-form class="box" :model="baseForm" ref="baseForm" label-width="70px" >
      <el-card shadow="never" >
        <el-form-item label="栏目">
          <el-checkbox-group v-model="baseForm.relatedColumns">
            <template v-for="(item, index) in relatedColumns" >
              <el-row>
                <el-col :span="2">
                  <el-checkbox :key="index" :label="item.id" :indeterminate="item.indeterminate" :checked="item.mychecked" @change="onChangeTop(index, $event)">{{item.name}}</el-checkbox>
                </el-col>
                <el-col :span="12">
                  <template>
                    <el-checkbox v-if="item.child!=[]" v-for="(items, indexs) in item.child" :label="items.id" :checked="items.mychecked" :key="indexs" @change="onChangeSon(index, items.id, $event)">{{items.name}}</el-checkbox>
                  </template>
                </el-col>
              </el-row>
            </template>
          </el-checkbox-group>
        </el-form-item>
      </el-card>
    </el-form>

  </div>
</template>

<script>

export default {
    name: 'Home',
    components: {
      HelloWorld
    },
    data(){
      return{
          // 基础表单
          baseForm: {
              relatedColumns:[] //用来接收选中的id值
          },
          relatedColumns:[],  //初始化存放所有栏目
      }
    },
    mounted(){
        this.getRelationChannel()
    },
    //获取关联栏目列表
    methods:{
        //获取数据 添加自定义属性 mychecked及indeterminate
        getRelationChannel(){
            this.$axios.get('./check.json').then(res=>{
                res.data.data.forEach(item=>{
                    console.log(item);
                    item.mychecked = false
                    item.indeterminate =false
                    if(item.child!=[]){
                        item.child.forEach(items=>{
                            items.mychecked = false
                            items.indeterminate =false
                        })
                    }
                })
                this.relatedColumns = res.data.data
            }).catch(error=>{
                console.log(error);
            })
        },
        //父级checbox点击事件
        onChangeTop(index, e){
            //选中
            if(e){
                this.relatedColumns[index].mychecked  = true
                this.relatedColumns[index].indeterminate = false
                this.relatedColumns[index].child.forEach(item=>{
                    let i = this.baseForm.relatedColumns.indexOf(item.id)
                    if(i === -1){
                        this.baseForm.relatedColumns.push(item.id)
                    }
                })
            }
            //未选中
            else{
                this.relatedColumns[index].mychecked  = false
                this.relatedColumns[index].indeterminate = false
                this.relatedColumns[index].child.forEach(item=>{
                    let i = this.baseForm.relatedColumns.indexOf(item.id)
                    if(i>-1){
                        this.baseForm.relatedColumns.splice(i,1)
                    }
                })
            }
            // console.log(this.baseForm.relatedColumns);
        },
        //子级checbox点击事件
        onChangeSon(index , sonId, e){
            var childrenArray = this.relatedColumns[index].child
            var tickCount = 0, len = childrenArray.length
            childrenArray.forEach(item=>{
                if(this.baseForm.relatedColumns.indexOf(item.id)>-1){
                    item.mychecked = true
                }
            })

            for(let i = 0; i < len; i++){
                if(sonId == childrenArray[i].id) {
                    childrenArray[i].mychecked = e
                }
                if(childrenArray[i].mychecked == true) {
                    tickCount++
                }
            }

            this.relatedColumns[index].indeterminate = ((tickCount!==len)&&(tickCount!==0)) ? true:false
            this.relatedColumns[index].mychecked = (tickCount===0) ? false:true  //全不选的时候为false

            if(tickCount === 0){
                let i = this.baseForm.relatedColumns.indexOf(this.relatedColumns[index].id)
                if(i>-1){
                    this.baseForm.relatedColumns.splice(i,1)
                }
            }
            else{
                if(this.baseForm.relatedColumns.indexOf(this.relatedColumns[index].id)===-1){
                    this.baseForm.relatedColumns.push(this.relatedColumns[index].id)
                }
            }
            // console.log(this.baseForm.relatedColumns);
            // console.log(this.relatedColumns);
        },
    }


}
</script>

<style scoped>
  .home{
    margin-top: 200px;
  }
  .box{
    width: 50%;
    margin: auto;
  }
  .el-col-12{
    display: flex;
    justify-content: flex-start;
    padding-left: 40px;
  }
</style>

2.效果

3.实例地址

https://qingchen1120.com/check

4.个人理解

<el-checkbox :key=“index” :label=“item.id” :indeterminate=“item.indeterminate” :checked=“item.mychecked” @change=“onChangeTop(index, $event)”>{{item.name}}

:indeterminate：设置 indeterminate 状态，只是控制样式的选中、不选中、部分选中
:checked：当前是否勾选
:label：选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）

5.原文地址

原文地址