关于复选框（二）

多选

后端返回数据

{
"id": 101,
"label": "深圳总公司",
"children": [
{
"id": 103,
"label": "研发部门"
},
{
"id": 104,
"label": "市场部门"
},
{
"id": 105,
"label": "测试部门"
},
{
"id": 106,
"label": "财务部门"
},
{
"id": 107,
"label": "运维部门"
}
]
}

优化成一维

[
{
"id": 103,
"label": "研发部门"
},
{
"id": 104,
"label": "市场部门"
},
{
"id": 105,
"label": "测试部门"
},
{
"id": 106,
"label": "财务部门"
},
{
"id": 107,
"label": "运维部门"
},
{
"id": 108,
"label": "市场部门"
},
{
"id": 109,
"label": "财务部门"
}
]

前端代碼

让复选框纵向排列
<div class="leftStyle">                       
      <el-checkbox-group v-model="deptOptions">
            <el-checkbox style="display: block; padding-top: 10px" v-for="(e, i) in   deptOptions"
                :key="i" :label="e.id" @change="pushLabel($event, e, i)">{{ e.label
                }}</el-checkbox>
        </el-checkbox-group>
</div>





//data
deptOptions: [],
j:[],

// methods:
        pushLabel(e, b) {
            console.log(e); //e为true或false
           
            if (e) {

                console.log(JSON.stringify(b));
                
                this.j.push(b.id)     

            } else {
                this.j.forEach((item, i) => {
                    if (item == b.id) {
                        this.j.splice(i, 1)
                    }
                })
            }

            console.log(JSON.stringify(this.j));
            this.f.deptIds = this.j  //部门id传给后台

        },