el-table扩展行的选中问题

在开发中遇到了一个问题：主表格中，每一行数据都有一个扩展行（扩展行通过设置主表格的type="expand"实现），并且扩展行中显示的内容又是一个表格，这就会导致，在选中主表格不同行的扩展行时，通过设置主表格el-table的选中变化事件@selection-change="handleSelectionChange"，能取到选中值只有最近一次点击的子表中的，这也就是说，主表的不同行的扩展行中的表格是多个不同的表格，当选择完主表第一行扩展行的表格，再去选择第二行扩展行的表格时，第二行选择的值会将第一行覆盖掉。如图，此时能取到的选中值只有第二行扩展行表格中的选中值，第一行扩展行的选中值会被覆盖掉而消失。

为此，针对如下方式实现的多选列查了很多资料，但都没有解决。

<el-table-column type="selection"></el-table-column>

因此，改变思路，使用el-checkbox去实现多选列，代码如下：

<el-table :data="tableData">   主表
    <el-table-column type="expand" align="center" label="" width="55px" fixed>
        <template slot-scope="props">
            <el-table:data="props.row.xx">   扩展行子表
                <el-table-column align="center" width="50px">
                    <template slot="header">
                        <el-checkbox v-model="props.row.selectAll"              
                          @change="subtableSelectionChange(props.row,true)"/>
                    </template>
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.selected" 
                          @change="subtableSelectionChange(props.row)"/>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </el-table-column>
</el-table>

 el-checkbox的change函数如下：

subtableSelectionChange(row,isall){
        if(isall){   // 全选
          row.hwxx.forEach(d=>{
            d.selected=row.selectAll  
            
          });
        }else{   // 单选
          row.selectAll=row.hwxx.every(d=>d.selected)
        }
},

这样写了之后，只需要在子表数据中加一个selected属性即可判断数据是否被选中，不再通过子表传递的选中值。

这样做了之后，我又遇到了一个问题，在给子表数据添加selected属性时，我是直接这样做的：

this.tableData[i].xx[j].selected = true

这样赋值，在初始化页面时，复选框的页面显示没问题，但在手动点击复选框时，数据的selected的值发生变化了，但是，页面上不会刷新。为了解决这个问题，改变添加selected属性的方式：

this.$set(this.tableData[i].xx[j],'selected',true)

问题解决，初始化页面的时候，复选框显示正常，点击时，页面刷新也正常。

这样做了之后，我又又遇到了一个问题，表示全选的那个框，本来是通过selectAll属性控制选中状态的，可是selectAll的值变化了之后，全选框的页面无变化，因此，加一个key，在复选框这一列加一个key值，加在这里：

 加上：:key="selectAll"，就可以解决问题了。