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跨分頁多選及回顯”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！