vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据。

业务的需要：我要对与会人员勾选，记录所选的与会人员，并且点击到别的页面上时也要记录所勾选的。第一次尝试，每次点击下一页数据都会清空。然后我就去element ui官网查看了api.实现如下：

在table一定要定义以下事件和列表属性：

• row-key
• reserve-selection

handleSelectionChange这个事件的作用是我保存勾选数据的。

 <el-table @selection-change="handleSelectionChange" :row-key="getRowKeys">
　　......
 </el-table>

在data的return中定义：

getRowKeys(row) {
    return row.id;
},

  因为我数据库中有id这个字段，所以前台row里面有id作为唯一标识

因为使用了上面的表的属性，在配合下面的列属性：reserve-selection

<el-table-column type="selection" :reserve-selection="true" width="40" align="center">
</el-table-column>

type必须是selection。

因为要把勾选的数据传到后台所以在methods定义：

handleSelectionChange(val) {
    this.multipleSelection = val;//勾选放在multipleSelection数组中
},

想要数据自己在multipleSelection数组中拿。这时基本结束了，功能实现了。

再说下数据的回显：

　　先介绍下回显核心：

　　

 

toggleSelection(rows) {
    if (rows) {
        rows.forEach(row => {
            //toggleRowSelection(row,true); true代表双向（选中、取消），false代表单项取消
            this.$refs.multipleTable.toggleRowSelection(row,true);
        });
    } else {
        //取消所有选中
        this.$refs.multipleTable.clearSelection();
    }
}

---

喜欢博主的可以点赞关注一下

长得美的，长得帅的都关注了

现在就差你了

还不长按关注一下