多个table的选中问题

多个table的选中问题

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

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

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

多个table的选中问题_第1张图片

<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;
    }
}

你可能感兴趣的:(element,Vue,elementui,前端,vue.js)