element-UI,根据后台数据动态生成el-checkbox-group,点击提交获取绑定checked项以及实现显示默认checked项

Posted wjunwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-UI,根据后台数据动态生成el-checkbox-group,点击提交获取绑定checked项以及实现显示默认checked项相关的知识,希望对你有一定的参考价值。

<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值,需要打印看咯

技术分享图片

以上是关于element-UI,根据后台数据动态生成el-checkbox-group,点击提交获取绑定checked项以及实现显示默认checked项的主要内容,如果未能解决你的问题,请参考以下文章

element-ui 动态表头渲染表格

vue element-ui动态生成table表头和数据

zTreezTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

编辑表格输入内容根据input输入框输入数字动态生成表格行数编辑表格内容提交传给后台数据处理

element-ui表格组件table实现列的动态显示与隐藏

vue中通过后台返回的只动态生成表单及提交