element table跨分页多选及回显的实现示例
时间:2022-09-16 10:16:00|栏目:vue|点击: 次
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); } }); } }, } }
栏 目:vue
下一篇:Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)
本文标题:element table跨分页多选及回显的实现示例
本文地址:http://www.codeinn.net/misctech/213801.html