表格多选且有分页时,保存选中状态
1> row-key 2> reserve-selection
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
:row-key='getRowKey'
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55"
reserve-selection>
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
<el-pagination
layout='total, prev, pager, next'
:total='100'
:page-size='10'
@current-change='handleCurrentChange'>
</el-pagination>
</template>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
getRowKey(row){
return row.id
},
handleCurrentChange(val){
console.log(val)
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}