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