element-UI,根据后台数据、动态生成el-checkbox-group,点击提交获取绑定checked项以及实现显示默认checked项
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<template>
<div id="Demo">
<el-form ref="form" label-width="100px">
<el-form-item label="设备名称">
<div
class="check-group"
v-for="(item, index) in equipments"
:key="index">
<el-tag>{{item.menu}}</el-tag>
<el-checkbox-group
v-model="checkedEquipments[index]"
@change="handleChange(item.id)">
{{checkedEquipments[index]}}
<el-checkbox
v-for="data in item.childMenu"
:label="data.id"
:key="data.menu">
{{data.menu}}
</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
</el-form>
</div>
</template>
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: []
}
}
<el-checkbox-group v-for="(power, index) in lists" v-model="checkList[index]">
<el-checkbox v-for="power in group.powers" :key="power.id" :label="power.id">{{power.name}}</el-checkbox>
</el-checkbox-group>
created() {
for (let key in this.lists) {
this.$set(this.checkList, key, [])
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)