直接贴代码，代码中有注释

<template>
  <div class="viewer-container" id="viewer-container">
    <!-- 表格 -->
    <el-table
      :row-key="getRowKeys"
      :data="data.tableDataCopy"
      style="width: 100%"
      ref="sourceTabelRef"
      :height="300"
      @selection-change="selectionChange"
      @row-click="rowclick"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      layout="prev, pager, next"
      v-model:current-page="sourcePaging.pages"
      :page-size="sourcePaging.size"
      :total="sourcePaging.total"
      @current-change="CurrentsourceTabelDate"
    />
  </div>
</template>

<script setup>
/* eslint-disable*/
import { reactive, ref } from "vue";
let sourceTabelRef = ref();
let data = reactive({
  tableData: [
    {
      date: "2016-05-031",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 1,
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 2,
    },
    {
      date: "2016-05-04",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 3,
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 4,
    },
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 5,
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 6,
    },
    {
      date: "2016-05-04",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 7,
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 8,
    },
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 9,
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 10,
    },
    {
      date: "2016-05-04",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 11,
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 12,
    },
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 13,
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 14,
    },
    {
      date: "2016-05-04",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 15,
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 16,
    },
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 17,
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 18,
    },
    {
      date: "2016-05-04",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 19,
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
      id: 20,
    },
  ],
  tableDataCopy: [],
});
let sourcePaging = ref({
  total: data.tableData.length,
  pages: 1,
  size: 5,
});
//拷贝一份第一次为显示5条信息
data.tableDataCopy = JSON.parse(
  JSON.stringify(data.tableData.slice(0, sourcePaging.value.size))
);

//通过分页把原始数组分成对应的个数
const CurrentsourceTabelDate = (val) => {
  let { size } = sourcePaging.value;
  data.tableDataCopy = data.tableData.slice((val - 1) * size, val * size);
};

// 提交获取的表格勾选数据
const selectionChange = (val) => {
  console.log(val, "val");
};

//点击单行
const rowclick = (val) => {
  sourceTabelRef.value.toggleRowSelection(val);
};
const getRowKeys = (row) => {
  return row.id;
};
</script>

<style></style>