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跨分页多选及回显的实现示例的文章就介绍到这了