element table多选表格_vue + element-ui Table 的数据多选 多页选择数据回显，分页记录保存选中的数据...

答案

2020-03-30更新【解决思路】

1、翻页回显：在type="selection"列设置 :reserve-selection="true"。

同时在里设置:row-key属性。

.

.

.

ref="multipleTable"

:row-key="getRowKeys"

@selection-change="handleSelectionChange"

.

.

.

type="selection"

:reserve-selection="true"

width="40">

2、选中的数据删除同时原表格里的选中状态也更新。这个可以理解为删除选中数据后是对原表格设置默认选中功能。

toggleRowSelect(rows) {

const _this = this

if (rows.length > 0) {

this.$nextTick(() => {

rows.forEach(row => {

_this.$refs.multipleTable.toggleRowSelection(row, true)

})

})

} else {

this.$refs.multipleTable.clearSelection()

}

},

这里要注意一点的是在执行this.toggleRowSelect(selecetData)时，要对表格进行刷新一下，不然删除之后的选中状态无法更新。可以在增加一个v-if刷新的判断

【2018-07-20】

用element-ui table里这个参数

reserve-selection -->仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。

配合row-key -->行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

ref="multipleTable"

:data="orderTable"

:row-key="getRowKeys"

@selection-change="handleSelectionChange">

background

@current-change ="handleCurrentChange"

layout="prev, pager, next"

:page-size="pagesize"

:total="total_number">

data:function(){

return{

// 获取row的key值

getRowKeys(row) {

return row.orderid;

},

}

}

methods：

//选择筹款订单

handleSelectionChange(rows) {

this.multipleSelection = rows;

this.select_order_number = this.multipleSelection.length;

this.select_orderId = [];

if (rows) {

rows.forEach(row => {

if (row) {

this.select_orderId.push(row.orderid);

}

});

}

}