element table跨分页多选及回显的实现示例
作者：妮可是条狗
本文主要介绍了element table跨分页多选及回显的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
1.data中定义getRowKeys，记录每行的key值
getRowKeys(row) {
return row.id;
},2.el-table绑定getRowKeys
<el-table :data="tableData" @selection-change="handleSelectionChange" :row-key="getRowKeys" >
3.将selection列的reserve-selection设为true
<el-table-column type="selection" width="50" align="center" :reserve-selection="true" ></el-table-column>
4.表格数据选中方法handleSelectionChange
handleSelectionChange(rows) {
this.multipleSelection = rows;
this.select_number = this.multipleSelection.length;
this.select_Id = [];
if (rows) {
rows.forEach((row) => {
if (row) {
this.select_Id.push(row.id);
}
});
}
},代码整理
<template>
<div>
<el-table @selection-change="handleSelectionChange" :row-key="getRowKeys">
<el-table-column type="selection" width="50" align="center" :reserve-selection="true">
</el-table-column>
</el-table>
<el-pagination>...</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
multipleSelection: [], // 表格选中
getRowKeys(row) {//记录每行的key值
return row.id;
},
select_number: "", //表格select选中的条数
select_Id: [], //表格select复选框选中的id
}
},
methods: {
handleSelectionChange(rows) {
this.multipleSelection = rows;
this.select_number = this.multipleSelection.length;
this.select_Id = [];
if (rows) {
rows.forEach((row) => {
if (row) {
this.select_Id.push(row.id);
}
});
}
},
}
}到此这篇关于element table跨分页多选及回显的实现示例的文章就介绍到这了,更多相关element table跨分页多选及回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！