vue3前端分页,全选翻页状态保持

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

javascript 复制代码
<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>
相关推荐
ma773 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在3 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang7 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻8 分钟前
前端面试十一之TS
前端
摆烂为不摆烂8 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead21 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00124 分钟前
封装一个有最小化的dialog组件
前端·javascript·css
水果里面有苹果26 分钟前
20-C#构造函数--虚方法
java·前端·c#
Zachery Pole26 分钟前
BootStrap
前端·bootstrap·html
一尾流莺29 分钟前
【2025 年中总结】世事浮云何足问,不如高卧且加餐
前端·掘金社区