本方案仅供快捷实现数据的翻页多选，不支持翻页多选数据的反显，若想支持翻页多选数据的反显，请参考全能版

• Element UI 多选表格【翻页多选】全能版（含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案）_朝阳39的博客-CSDN博客
  https://blog.csdn.net/weixin_41192489/article/details/125995891

效果预览

实现原理

1. 给 el-table 添加 :row-key="getRowKeys"，官网解释如下：
   

    // 优化表格渲染
    getRowKeys(row) {
      return row[this.UID];
    },
1
2
3
4

UID 为 data() 中定义的唯一标识符，

      // 唯一标识符
      UID: "ID",
1
2

2. 在多选列上添加 :reserve-selection="true"，官网解释如下：
   

      <el-table-column
        type="selection"
        width="55"
        align="center"
        :reserve-selection="true"
      >
      el-table-column>
1
2
3
4
5
6
7

3. 通过 selection-change 事件，获取所有选中行，官网解释如下：
   

    // 获取所有选中的数据
    selectionChange(selectedRows) {
      this.selectedList = selectedRows;
    },
1
2
3
4

完整范例代码

<template>
  <div class="mainBox">
    <h3>已选择：h3>
    <el-tag :key="item[UID]" v-for="item in selectedList">
      {{ item.name }}
    el-tag>
    <el-table
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      :row-key="getRowKeys"
      @selection-change="selectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        :reserve-selection="true"
      >
      el-table-column>
      <el-table-column prop="ID" label="编号" align="center"> el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      el-table-column>
    el-table>
    <el-row type="flex" class="pageBanner" justify="center">
      <el-pagination
        background
        :total="total"
        :page-size="pageSize"
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
        :current-page="currentPage"
        :page-sizes="[1, 2, 3]"
        layout="total, sizes, prev, pager, next, jumper"
      >
      el-pagination>
    el-row>
  div>
template>
<script>
export default {
  data() {
    return {
      // 唯一标识符
      UID: "ID",
      loading: false,
      total: 0,
      pageSize: 3,
      currentPage: 1,
      selectedList: [],
      tableData: [],
    };
  },

  mounted() {
    // 页面初始化时，首次加载数据
    this.getData(this.currentPage, this.pageSize);
  },

  methods: {
    // 优化表格渲染
    getRowKeys(row) {
      return row[this.UID];
    },
    // 获取所有选中的数据
    selectionChange(selectedRows) {
      this.selectedList = selectedRows;
    },
    // 切换每页显示条数
    pageSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.getData(this.currentPage, this.pageSize);
    },
    // 切换页码--翻页
    currentPageChange(newPage) {
      this.currentPage = newPage;
      this.getData(this.currentPage, this.pageSize);
    },

    // 模拟访问接口获取数据
    getData(page, pageSize) {
      this.loading = true;
      setTimeout(() => {
        let data = [
          {
            ID: 1,
            name: "王小虎",
            age: 10,
          },
          {
            ID: 2,
            name: "张三",
            age: 20,
          },
          {
            ID: 3,
            name: "李四",
            age: 30,
          },
          {
            ID: 4,
            name: "何香",
            age: 18,
          },
          {
            ID: 5,
            name: "刘刀",
            age: 27,
          },
          {
            ID: 6,
            name: "关胜",
            age: 33,
          },
          {
            ID: 7,
            name: "齐巧",
            age: 55,
          },
          {
            ID: 8,
            name: "卢一方",
            age: 45,
          },
          {
            ID: 9,
            name: "王兴海",
            age: 66,
          },
          {
            ID: 10,
            name: "全德",
            age: 100,
          },
        ];

        this.total = data.length;
        let startIndex = pageSize * (page - 1);
        let endIndex = pageSize * page;
        this.tableData = data.slice(startIndex, endIndex);

        this.loading = false;
      }, 1000);
    },
  },
};
script>
<style  scoped>
.mainBox {
  margin: 30px;
}
.el-tag {
  margin: 10px;
}
.pageBanner {
  margin: 10px;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160