bootstrap获取选中行的主键_vue+elementui 动态获取数据 遍历循环 生成el-checkbox-group...

实际效果，参照了http://www.cnblogs.com/wjunwei/p/9531322.html

数据库存表方式和单选一样

多选题

新增

class="not_eng_item1"

v-for="(item, index) in equipments"

:key="index">

v-model="checkedEquipments[index]"

>

{{checkedEquipments[index]}}

v-for="data in item.childMenu" @change="handleChange(data,index)"

:label="data.id"

:key="data.menu">

{{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(