element如何实现table跨分页多选及回显

小编给大家分享一下element如何实现table跨分页多选及回显，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

data中定义getRowKeys，记录每行的key值

getRowKeys(row) {   return row.id;},

el-table绑定getRowKeys

<el-table    :data="tableData"    @selection-change="handleSelectionChange"    :row-key="getRowKeys">

将selection列的reserve-selection设为true

<el-table-column    type="selection"    width="50"    align="center"    :reserve-selection="true"></el-table-column>

表格数据选中方法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跨分页多选及回显”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网精选频道，感谢各位的阅读！