本文意在解决用 element-ui 中 table 时,需要选中行,并且结合分页做翻页操作时,保留前一页选中
话不多说直接上代码
html部分
<!-- html代码块 -->
<!-- 表体 -->
<el-table
ref="multipleTable"
:data="tableData"
row-key="index"
@selection-change="selectionChange">
<el-table-column type="selection" :reserve-selection="true" fixed="left" />
<el-table-column prop="index" label="序号" />
...
</el-table>
<!-- 分页 -->
<el-pagination
layout="total, sizes, prev, pager, next"
:current-page.sync="currentPage"
:page-size="pageSize"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"></el-pagination>
- el-table中要设置row-key,并设置tableData中的唯一值,比如index(若不设置时方法不生效、设置错误或值不唯一时控制台会报错);
- el-table-column中的selection选框列设置reserve-selection为true(数据更新之后保留之前选中的数据)
js部分
// js代码块
selectionChange(val){
this.tableSelectList = val
}
- 该方法在选中状态改变时(选中、取消)触发,可拿到选中行的全量数据供某些功能使用,比如:接口数据提交
拓展
表格配合表单查询时(或其他类似操作),每次执行查询需要将选中列表清除,但翻页时不清除
// js代码块
search(clean = true){
this.tableData.splice(0) // 每次先将表格数据清除
getTableData({ // 模拟接口
...data // 表单数据
}).then(res => {
this.tableData = res.List
this.total = res.Total
clean && this.$refs.multipleTable && this.$refs.multipleTable.clearSelection()
// clean 为 true 时清除选中,分页时传 false 则不会触发
}
},
handleSizeChange(val){
this.pageSize = val
this.currentPage = 1 // 改变页容,先将当前页码归 1
this.search(false)
},
handleCurrentChange(val){
this.currentPage = val
this.search(false)
},
其实严格来说每次执行查询也要将当前页归1,此处就省略啦(狗头保命 o.0)