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跨分页多选及回显”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！