在进行项目开发时,遇到表格数据通过搜索筛选后,数据在表格中保持复选框选定的状态。element-ui提供了reserve-selection来完成这个事情。该属性需要配合row-key使用。注意,数据中包含一个字段id,不然在筛选后最后一次勾选的数据不会保持勾选状态。
<template>
<el-table
ref="multipleTable"
:data="tableData"
:row-key="getRowKey"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
:reserve-selection="true"
type="selection"
width="55">
</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>
</template>
<script>
export default {
data() {
return {
tableData: [{
id:1,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id:2,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
getRowKey(row){
return row.id
}
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>