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>
相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20154 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎9 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip