vue + element-ui Table里select框选择

原文链接地址
https://www.cnblogs.com/jiangweichao/p/9620940.html

需求：
element-ui 里的table表格里有select多选框时候，当前页面里选择了数据，点击下一页又选择了数据，第一页的数据不清空，两页 的数据可以累加。

实现：
1、以下几个字段是必写的
row-key
handleSelectionChange这个事件的作用是我保存勾选数据的
reserve-selection
type必须是selection

<el-table @selection-change="handleSelectionChange" :row-key="getRowKeys">
      <el-table-column type="selection" :reserve-selection="true" width="40" align="center">
      </el-table-column>
</el-table>

image.png
image.png

2、在data的return中定义：

getRowKeys(row) {
    return row.id;
},
\\因为我数据库中有id这个字段，所以前台row里面有id作为唯一标识

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

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