Element Table 多层展开行内部不同展开行多选数据处理

 Element Table 多层展开行内部不同展开行多选数据处理

Table 展开行通过设置 type="expand" 和 Scoped slot 可以开启展开行功,如何选择Table 多层展开行内部不同展开行多选数据进行处理呢

 见图

                                                                     

需求是需要选取不同绿色区域的数据进行处理，Table Events 中selection-change 事件又只能获取到当前绿色区域选择的值，而之前的绿色区域选择值就没了，后来想通过push，把选择的值放在一起，那我选择数据怎么更新。。。。。。

<el-table :data="data"@selection-change="selectionChange($event,'标识1')">
                <el-table-column type='expand'>
                    <template slot-scope="props">
                        <el-table :data="props.row.children"
                                  @selection-change="selectionChange($event,'标识2',)"
                                  @select="Select(selection,props.row.ID)"
                                  @select-all="Select(selection,props.row.ID)">
                        </el-table>
                    </template>
                </el-table-column>
            </el-table>

 

selectData:{},//标识2层级选中的信息
selectDataArr:[],//标识2层级选中的信息

//data为上一层的ID（可为其他值，但要唯一，要做为key插进selectData中），再也不用担心数据更新的问题
Select(selection,data){
     this.$set(this.selectData,data,selection)
}

//可通过标识 可获取多层级中相同标识层级中的数据
this.selectDataArr= [];
for(let key in this.selectData) {
   let value = this.selectData[key];
   this.selectDataArr= [...this.selectDataArr,...value]
}
selectDataArr中为所有所选数据的集合
                

点击全选无数据问题
 

增加

select-all

当用户手动勾选全选 Checkbox 时触发的事件

@select-all="Select(selection,props.row.ID)"  解决

 

出现多条重复数据解决方法

使用完后将this.selectData = {};

 

若有问题、更优解决方案、请评论