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>
相关推荐
江城开朗的豌豆6 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician10 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
FIN666825 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD35 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆35 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel38 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒1 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
北海-cherish7 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909068 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5