element-UI,根据后台数据、动态生成el-checkbox-group,点击提交获取绑定checked项以及实现显示默认checked项
<div
class="check-group"
v-for="(item, index) in equipments"
:key="index">
{{item.menu}}
group
v-model="checkedEquipments[index]"
@change="handleChange(item.id)">
{{checkedEquipments[index]}}
checkbox
v-for="data in item.childMenu"
:label="data.id"
:key="data.menu">
{{data.menu}}
export
default {
data() {
return {
checkedEquipments: [], //随意修改后的checked项(即要传到后台的变更数据)
equipments: [
// 所有数据
{
id: '1'
,
menu: '设备1'
,
childMenu: [{
id: '1-1'
,
menu: '暖通一'
}, {
id: '1-2'
,
menu: '照明一'
}, {
id: '1-3'
,
menu: '取暖一'
}, {
id: '1-4'
,
menu: '应急一'
}
]
},
{
id: '2'
,
menu: '设备2'
,
childMenu: [
{
id: '2-1'
,
menu: '暖通二'
}, {
id: '2-2'
,
menu: '照明二'
}, {
id: '2-3'
,
menu: '取暖二'
}, {
id: '2-4'
,
menu: '应急二'
}
]
}
],
checkEquip: [ //模拟后台获取的数据(各el-checkbox-group默认checked项)
{
id: '1'
,
menu: '设备1'
,
childMenu: [
{
id: '1-1'
,
menu: '暖通一'
}, {
id: '1-2'
,
menu: '照明一'
}
]
}, {
id: '2'
,
menu: '设备2'
,
childMenu: []
}
]
};
},
methods: {
handleChange () {
this.checkEquipArr =
[]
let arr =
this.checkedEquipments
for (let i = 0; i < arr.length; i ++
) {
let equipment =
arr[i]
if (equipment.length > 0
) {
let obj =
{
id: this.equipments[i].id,
equips: []
}
for (let j = 0; j < equipment.length; j++
) {
obj.equips.push(equipment[j])
}
this.checkEquipArr.push(obj)
}
}
console.log(this.checkEquipArr);
}
},
created () {
// 初始化默认选中状态
for (let i = 0; i <
this.checkEquip.length; i++
) {
let checkArr =
[]
let item =
this.checkEquip[i].childMenu
if (item.length === 0
) {
this.checkedEquipments.push([])
}else {
for (let j = 0; j < item.length; j ++
) {
checkArr.push(item[j].id)
}
this.checkedEquipments.push(checkArr)
}
}
console.log(this.checkedEquipments);
}
};
每个人的数据格式不一样,但是实现逻辑都是一样的。可以作为参考,稍微修改一下代码实现符合自己的数据格式。
实现结果(动态生成 checkbox-group,并且设置默认checked项),具体v-model值,需要打印看咯
简单点来说:
就是根据你的数据生成一个二维数组,比如data是lists,那么就是这样写了
data() {
return {
lists: [你的数据],
checkList: []
}
}
for="(power, index) in lists" v-model="checkList[index]">
for="power in group.powers" :key="power.id" :label="power.id">{{power.name}}
created() {
for (let key in this.lists) {
this.$set(this.checkList, key, [])
}
}