关于复选框（二）

最新推荐文章于 2025-12-11 21:57:31 发布

原创最新推荐文章于 2025-12-11 21:57:31 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #elementui

ts 专栏收录该内容

3 篇文章

订阅专栏

文章展示了如何将后端返回的多级数据结构优化成一维数组，便于前端使用。在Vue.js环境中，利用el-checkbox组件实现复选框的纵向排列，并通过方法处理复选状态，动态更新选中项目的ID数组。

多选

在这里插入图片描述
后端返回数据

{
"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传给后台

        },