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>
相关推荐
前端_学习之路27 分钟前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css
你的人类朋友2 小时前
🫏光速入门cURL
前端·后端·程序员
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js