vue+elementui 动态获取数据 遍历循环 生成el-checkbox-group
实际效果，参照了http://www.cnblogs.com/wjunwei/p/9531322.html
数据库存表方式和单选一样
多选题
新增
{{checkedEquipments[index]}}
{{data.menu}}
data(){
return{
checkedEquipments: [], //随意修改后的checked项（即要传到后台的变更数据）
equipments: [] // 所有数据
checkEquip: [] //模拟后台获取的数据（各el-checkbox-group默认checked项）
}
}
equipments的数据格式
equipments: [ // 所有数据
{
id: 1,
menu: '健康包括哪几个方面?',
childMenu: [
{id:0,menu:'合理的饮食'},
{id:1,menu:'均衡的营养'},
{id:2,menu:'适当的运动'},
{id:3,menu:'愉快的心态'},
{id:4,menu:'以上四项都包括'},
]
},
{
id: 2,
menu: '人体需要的营养素',
childMenu: [
{id:0,menu:'蛋白质'},
{id:1,menu:'碳水化合物'},
{id:2,menu:'脂类'},
{id:3,menu:'矿物质'},
{id:4,menu:'维生素'},
{id:5,menu:'水'},
{id:6,menu:'膳食纤维'},
]
},
{
id: 3,
menu: '一起来了解一下您的消化系统',
childMenu: [
{id:0,menu:'经常消化不良'},
{id:1,menu:'经常便秘'},
{id:2,menu:'偶尔轻度腹泻'},
{id:3,menu:'肝功能下降'},
]
},
]
如果是点击新建的话，页面上被选中的数据为空,checkEquip 下的childMenu数组都为空
checkEquip: [ // 所有数据
{
id: 1,
menu: '健康包括哪几个方面?',
childMenu: [
]
},
{
id: 2,
menu: '人体需要的营养素',
childMenu: [
]
},
{
id: 3,
menu: '一起来了解一下您的消化系统',
childMenu: [
]
},
]
否则的就往里面存数据，这样就会默认被选中即用来做数据的回显(第一张图片的样子)
checkEquip: [ // 所有数据
{
id: 1,
menu: '健康包括哪几个方面?',
childMenu: [
{id:0,menu:'合理的饮食'},
{id:2,menu:'适当的运动'},
]
},
{
id: 2,
menu: '人体需要的营养素',
childMenu: [
{id:1,menu:'碳水化合物'},
{id:2,menu:'脂类'},
]
},
{
id: 3,
menu: '一起来了解一下您的消化系统',
childMenu: [
{id:0,menu:'经常消化不良'},
{id:1,menu:'经常便秘'},
]
},
]
checkedEquipments这个数据格式比较特殊，他虽然是个空的数组，但是数据格式必须为
他是一个二维数组，你有多少行数据，就必须包含多少个空的一维数组，如上是三个，所以
checkedEquipments=[[],[],[]]
methods:{
handleChange (data,index) {
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)
}
}
},
}
我从后台取出数据放到前台组装数据格式，过程比较麻烦，我代码贴出来，写的比较乱，随便看看好了
组装数据格式
_this.duoarr.forEach(function(item,index){
/*danNewArr=danNewArr.push(item.detail.split(','))*/
_this.duoNewArr.push(item.detail.split(','));
})
var srr2=[];
var arr1=[];
var arrn1=[]
if(this.flags==1){
let myshow=this.duoresult.split(",")
for(var s=0;s0){
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)
}
}
}
}
for(var i=0;i<_this.duoNewArr.length;i++){
_this.checkedEquipments.push([]);
var arr=[]
for(var j=0;j<_this.duoNewArr[i].length;j++){
var p={
id:j,
menu:_this.duoNewArr[i][j]
}
arr.push(p)
_this.duoNewStr.label=j;
}
arr1.push(arr)
var f={
id:_this.duoarr[i].id,
menu:_this.duoarr[i].title,
childMenu:arr1[i]
}
if(this.flags==0){//flags=0是新建，flags=1是查看，即数据的回显
var w={
id:_this.duoarr[i].id,
menu:_this.duoarr[i].title,
childMenu:[]
}
_this.checkEquip.push(w);
}
_this.equipments.push(f);
}
}