element 实现 表格 跨页选择

一、element 实现 跨页选择

1.关键属性：row-key、selection-change 和 reserve-selection

reserve-selection="true" // 会在数据更新后保留 之前选中的数据

2.代码

<template>
  <el-table
    ref="multipleTable"
    :data="
      tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    "
    height="580"
    row-key="id"
    style="width: 100%"
    tooltip-effect="dark"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55"
      align="center"
      :reserve-selection="true"
    >
    </el-table-column>
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
  <div class="block">
    <span class="demonstration">
      当前选中 -- 【{{ multipleSelection.length }}】 条</span
    >
    <el-pagination
      align="center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[20, 200, 300, 1000]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "4",
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: "5",
          date: "2016-05-01",
          name: "王小虎5",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "6",
          date: "2016-05-03",
          name: "王小虎6",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: "7",
          date: "2016-05-01",
          name: "王小虎7",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "8",
          date: "2016-05-03",
          name: "王小虎8",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: "9",
          date: "2016-05-01",
          name: "王小虎9",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "10",
          date: "2016-05-03",
          name: "王小虎10",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: "11",
          date: "2016-05-01",
          name: "王小虎11",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "12",
          date: "2016-05-03",
          name: "王小虎12",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          id: "13",
          date: "2016-05-01",
          name: "王小虎13",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "14",
          date: "2016-05-03",
          name: "王小虎14",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      multipleSelection: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 2, // 每页的数据条数
    };
  },
  mounted() {
    // this.getData();
  },
  methods: {
    // 获取选中的值
    handleSelectionChange(val) {
      console.log("@选中的值", val);
      this.multipleSelection = val;
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>
<style lang="less" scoped>
.block {
  display: flex;
}
</style>