多选
后端返回数据
{
"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传给后台
},