vue+elementui 动态获取数据 遍历循环 生成el-checkbox-group

版权声明： https://blog.csdn.net/chenacxz/article/details/84633175

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

 

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

<el-card class="boxs-card">
            <div slot="header" class="clearfix">
              <span>多选题</span>
              <el-button style="float: right; padding: 3px 2px;" type="text" @click="addDuo()">新增</el-button>
            </div>
            <div
              class="not_eng_item1"
              v-for="(item, index) in equipments"
              :key="index">
                <el-button type="primary" icon="el-icon-edit" circle @click="edited(index)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="deleted(index)"></el-button>
                <el-input v-model="item.menu" placeholder="请输入内容" style="width:25%;" :readonly="shownput" clearable></el-input>
                <el-checkbox-group style="display: inline-block"
                  v-model="checkedEquipments[index]"
                >
                  {{checkedEquipments[index]}}
                  <el-checkbox border
                    v-for="data in item.childMenu"  @change="handleChange(data,index)"
                    :label="data.id"
                    :key="data.menu">
                    {{data.menu}}
                  </el-checkbox>
                </el-checkbox-group>
            </div>
          </el-card>

    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;s<myshow.length;s++){
                srr2.push(myshow[s].split("、").sort(function(x,y){
                  return x-y;
                }));
              }
              for(var i=0;i<_this.duoNewArr.length;i++){
                for(var n=0;n<srr2.length;n++){
                  if(n==i){
                    var arrn=[]
                    for(var m=0;m<srr2[n].length;m++){
                      var l=parseInt(srr2[n][m])
                      var pp={
                        id:l,
                        menu:_this.duoNewArr[i][l]
                      }
                      arrn.push(pp)
                    }
                    arrn1.push(arrn);
                  }
                }
                var ff={
                  id:_this.duoarr[i].id,
                  menu:_this.duoarr[i].title,
                  childMenu:arrn1[i]
                }
                _this.checkEquip.push(ff);
              }
              if(this.checkEquip.length>0){
                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);

            }
          }