多个table的选中问题

最新推荐文章于 2024-05-10 09:26:14 发布

hibiscusxin

最新推荐文章于 2024-05-10 09:26:14 发布

阅读量618

点赞数 14

分类专栏： element Vue 文章标签： elementui 前端 vue.js

本文链接：https://blog.csdn.net/qq_41838435/article/details/135609299

版权

Vue 同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

element

22 篇文章 3 订阅

订阅专栏

多个table的选中问题

场景：循环出来多个table，最后拿到所有选中的数据

出现的问题：比如先选择第一个table的某些数据，再去选另外的table，这样selection里面只有最后选中的table的数据。

解决方法：在selection-change里面传index，再进行进行存数据

在这里插入图片描述

<div class="wrapper" v-for="(item,index) in tableData" :key="index">
    <div class="top-title">
        <span>姓名：{{ item.name }}</span>
    </div>
    <div class="content-table">
        <el-table
            ...
            :data="item.list"
            @selection-change="(selection) => { selectionChange(selection,index)}"
            ... 
        ></el-table>
    </div>
</div>

data() {
    return {
        tableData: []
    	selectList: [],
        userSelected: []
    }
},
methods: {
    selectionChange(selection,index) {
        let data = [];
        data[index] = section;
        this.selectList[index] = data[index];
        let arr = [];
        this.selectList.map(item => {
            arr = arr.concat(item)
        })
        // userSelected即为最终的拿到的所有table里面选中的数据
        this.userSelected = arr;
    }
}