vue element 用table嵌套多选框checkbox

有了女朋友后我为什么用三天才写了一行代码

这几点饱(bei)读(nue)vue代码，深以为vue可以代替基础的js、jquery带我飞；
然而被虐千千遍，下面根据试错和想法写一下要做的东西：

1.试过的错，铺成下次试错的路

这世上本来没有轮子，造的人多了，轮子也就多了 ——特斯拉夫斯基.港

这里是form表单效果

html

<el-form ref="form" label-width="100px">
      <el-form-item label="数据源配置">
<!--        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>-->
        <div style="margin: 15px 0;"></div>
        <div
          v-for="(item, index) in equipments"
          :key="index"
          class="check-group"
        >
          <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"
              :key="data.menu"
              :label="data.id"
            >
              {{ data.menu }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
    </el-form>

数据

isIndeterminate: true,
      checkAll: false,
      checkedEquipments: [], // 随意修改后的checked项（即要传到后台的变更数据）
      equipments: [ // 所有数据
        {
          id: '1',
          menu: 'table1',
          childMenu: [{
            id: '1-1',
            menu: '字段一'
          }, {
            id: '1-2',
            menu: '字段二'
          }, {
            id: '1-3',
            menu: '字段三'
          }, {
            id: '1-4',
            menu: '字段四'
          }
          ]
        },
        {
          id: '2',
          menu: 'table2',
          childMenu: [
            {
              id: '2-1',
              menu: '字段1'
            }, {
              id: '2-2',
              menu: '字段2'
            }, {
              id: '2-3',
              menu: '字段3'
            }, {
              id: '2-4',
              menu: '字段4'
            }
          ]
        }
      ],
      checkEquip: [ // 模拟后台获取的数据（各el-checkbox-group默认checked项）
        {
          id: '1',
          menu: 'table1',
          childMenu: [
            {
              id: '1-1',
              menu: '暖通一'
            }, {
              id: '1-2',
              menu: '照明一'
            }
          ]
        }, {
          id: '2',
          menu: '设备2',
          childMenu: []
        }
      ]
      
// 方法
handleChange() {
      this.checkEquipArr = []
      const arr = this.checkedEquipments
      for (let i = 0; i < arr.length; i++) {
        const equipment = arr[i]
        if (equipment.length > 0) {
          const 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)
    }

错误：Duplicate keys detected: ‘[object Object]’. This may cause an update error.
写了两个一样的for循环，绑定的key相同。

目前还存在的问题变成了子列表全部放到了每一行中，需要加判断或者筛选条件

接近成功了，使用了插槽获取对应行的数据

用插槽可以展示出来了

至此参考三部分
vue+elementui 动态获取数据 遍历循环 生成el-checkbox-group
vue+element-ui之 el-table组件中的理解和使用
Vue.js的条件v-if和列表循环v-for
Vue组件开发实践之scopedSlot的传递

关于插槽的更新：
新：作用域插槽
旧：带有 slot-scope 特性的作用域插槽
如何理解：
深入理解vue中的slot与slot-scope

贴出来现在模拟数据的代码：

优化功能一：初始化时候，默认全选：

<el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="tables"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column fixed type="selection" width="55" />
        <el-table-column fixed prop="tablename" label="同步表" width="150" />
        <el-table-column label="同步字段" width="500">
          <template slot-scope="scope">
            <el-form>
<!--              <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" border size="mini" @change="handleCheckAllChange">全选</el-checkbox>-->
<!--              <div style="margin: 15px 0;" />-->
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="child in scope.row.childMenu" :key="child.id" :label="child['menu']" size="mini" text-color="#FF0000" />
              </el-checkbox-group>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="rColumnList" label="任务ID" width="500" />
        <el-table-column prop="address" label="任务描述" width="500" />
        <el-table-column fixed="right" label="状态" width="150">
          去查每一条的状态
          <el-button type="success" size="small" @click="handleStatus(row)">执行状态</el-button>
          <!--          <template slot-scope="scope">-->
          <!--            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>-->
          <!--            <el-button type="text" size="small">编辑</el-button>-->
          <!--          </template>-->
        </el-table-column>
      </el-table>

轮子的优化
Bug问题

需要先会在vue中实现form组件的append

map修改获取到的组装的结构：

// 塞数据
this.tableData.push({
  id: i,
  tablename: eachRow,
  childMenu: this.rColumnList.map( // 内层数组重构
    function(str, index) {
      // console.log({ id: index, menu: str })
      return { id: index, menu: str }
    }
  )
})

结构如下：
tableData为
[{
id: 0
tablename: “books”
childMenu:[
{id: 0, menu: ‘no_id’}
…
]
},
…
]
接下来，tableData作为一个对象。
用vue element的table的:data="tableData"接收作为表数据的填充，
常见的一列取对象对应的键值：

再往里面一层取对象某一个键的列表值：

想一下是借用tableData对象还是另外使用checklistgroup：{0: [‘books_0’, ‘books_1’, ‘books_2’], 1: [], 2: []}，修改原来的多选框的效果
先用checklistgroup作为表格第二列（表字段列）的多选框选项支持的数据：

调整测试html部分

因为el-checkbox-group的v-modal绑定值是数组，因此在group外层控制的绑定数据就应该是对象，这样内层取到的就是数组

bug

checkbox group的v-modal绑定的值在修改后会变化，但是视图渲染却在鼠标移出表格才能生效。

无法更新视图
在@change方法里面添加
this.$set(this.tableData, index, row)