基于vue2+element,#嵌套#多选表格的问题，如何解决？

Question

情景：基于vue2+element，制作的嵌套多选表格，共三层，二层没有多选框只是有内容要展示，所以只有一级和三级表格互相联动
问题：选中子级表格可以联动到一级表格，但是一级勾选后却不能全部选中第三级的数据，只是部分被勾选了，但是控制台可以打印到全部的数据，只是样式没有出来，
代码如下

        <el-table :data="paramsList" :show-header="false" ref="tableF" @select="handleSelectionChange"
           :row-key="getRowKey">
                        <el-table-column width="55" type="selection" ></el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">

                             <el-table :data="scope.row.goodsList" >
                                        <el-table-column align="center">
                                            <template slot-scope="scopeSon">

                                                  <el-table :data="scopeSon.row.spuList" :show-header="false"
                                            :ref="'tableChildSon' + scopeSon.$index" @select="handleSelectionChange3    :row-key="spuList.goodsId">
                                                            <el-table-column width="55" type="selection"></el-table-column>
                                                              <template slot-scope="scopeSons">
                                                                  

JS:

  //一级表格勾选
      handleSelectionChange(selection, row) {
        //判断一级表格是否选中  选中--true  未选中--0
        let isCheck = selection.length && selection.indexOf(row) !== -1;
        //循环整个表数据--找到勾选的 index
        this.paramsList.forEach((item, index) => {
          if (item.id == row.id) {
            let tempList = row.goodsList;
            this.spuList = []
            tempList.forEach((item1, index1) => {
              item1.spuList.forEach((items, indexs) => {
                this.spuList.push(items)
              })
            })
            //以防3级列表没有数据
            if (this.spuList) {
              //循环本次勾选的数据
              this.spuList.forEach((selectionItem, index) => {
                console.log('selectionItem', selectionItem, isCheck);
                this.$nextTick(function() {
                  this.$refs["tableChildSon" + [index]]
                    .toggleRowSelection(
                      selectionItem,
                      isCheck
                    );
                });
              });
              // 联动外部全选框
              if (this.shoped > this.spuList.length) {
                this.allType = true
              } else {
                this.allType = false
              }
            } else {
              this.$refs[`tableChildSon${index}`].clearSelection();
            }
          }
        })
      },
      //三级表格勾选
      handleSelectionChange3(selection, row) {
        let isCheck = selection.length && selection.indexOf(row) !== -1;
        //判断3级列表是否取消勾选（无数据）
        if (isCheck === 0) {
          isCheck = false
        } else {
          isCheck = true
        }
        this.paramsList.map(item => {
          item.goodsList.forEach((itemson, index) => {
            if (itemson.id == row.goodsId && itemson.shopId == item.id) {
              this.$refs.tableF.toggleRowSelection(item, isCheck);
            }
          });
        })
      },
    

Answer 1

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7642131