1. 程式人生 > >element-UI,根據後臺數據、動態生成el-checkbox-group,點擊提交獲取綁定checked項以及實現顯示默認checked項

element-UI,根據後臺數據、動態生成el-checkbox-group,點擊提交獲取綁定checked項以及實現顯示默認checked項

結果 for 並且 nbsp con 設備名 his reat mode

<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項