• Vue3+ElementPlus纯前端分页（手撕分页），无需修改后端

    前提：先把pagination安装上先

    1、在script中加上

            

    1. // 实现分页
    2. const currentPage = ref(1);
    3. const pageSize = ref(10);
    4. const totalItems = computed(() => tableData.value.length);
    5. const paginatedData = computed(() => {
    6.     const start = (currentPage.value - 1) * pageSize.value;
    7.     const end = start + pageSize.value;
    8.     return tableData.value.slice(start, end);
    9. });
    10.  
    11.  
    12. const handleCurrentChange = (newPage) => {
    13.     currentPage.value = newPage;
    14. };
    15.  
    16. const handleSizeChange = (newSize) => {
    17.     pageSize.value = newSize;
    18. };

    2.如果有查询的，调用查询后重置页码

    currentPage.value = 1; // 重置页码

    3.中的数据由原本的tableData更换为分页处理后的:paginatedData

    4.紧接着标签下面加上el-pagination

    1. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    2.                     :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="totalItems">
    3.                 el-pagination>

    修改前和修改后对比

    修改前：

    1. <template>
    2.     <el-card class="box-card">
    3.         <el-row>
    4.             <el-col :span="5">
    5.                 <el-input v-model="searchVal" placeholder="请输入需要查询内容" @change="Search" />
    6.             el-col>
    7.             <el-col :span="12">
    8.                 <el-button :disabled="!Sagency" type="primary" @click="Search">查询el-button>
    9.                 <el-button :disabled="!Iagency" @click="open" type="primary">新增el-button>
    10.                 <el-button type="primary" @click="handleExport">导出Excelel-button>
    11.             el-col>
    12.         el-row>
    13.         <br>
    14.         <el-row>
    15.             <el-col>
    16.                 <el-table :data="tableData" style="width: 100%;height: 65vh;" border ref="tb">
    17.                     <el-table-column type="selection" width="55" />
    18.                     <el-table-column prop="Ano" label="编号" width="150" />
    19.                     <el-table-column prop="Aname" label="姓名" width="150" />
    20.                     <el-table-column prop="Asex" label="性别" width="150" />
    21.                     <el-table-column prop="Aphone" label="电话" width="150" />
    22.                     <el-table-column prop="Aremark" label="备注" width="190" />
    23.  
    24.                     <el-table-column label="操作" align="center">
    25.                         <template #default="scope">
    26.                             
    27.                             <el-button :disabled="!Fagency" size="small" @click="handleEdit(scope.$index, scope.row)">修改el-button>
    28.                             <el-button :disabled="!Dagency" size="small" type="danger"
    29.                                 @click="handleDelete(scope.$index, scope.row)">删除el-button>
    30.                         template>
    31.                     el-table-column>
    32.                 el-table>
    33.                 
    34.                 
    35.                 <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="total"
    36.                     :current-page="parms.PageIndex" :page-size="pageSize" @current-change="handlePageChange" />
    37.             el-col>
    38.         el-row>
    39.         <add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success">add>
    40.     el-card>
    41. template>
    42. <script lang="ts" setup>
    43. import { ElMessage, ElTable } from 'element-plus';
    44. import { onMounted, Ref, ref, toRefs } from 'vue';
    45. import Agency from '../../../class/Agency';
    46. import { delAgency, getAgency } from '../../../http';
    47. import add from './add.vue';
    48. import useStore from '../../../store';
    49. import { exportToExcel } from '../../../tool/report'
    50.  
    51. const store = useStore()
    52. const total = ref(10)
    53. const parms = ref({
    54.     Id: 0,
    55.     Ano: "",
    56.     Aname: "",
    57.     Asex: "",
    58.     Aphone: "",
    59.     Aremark: "",
    60.     PageIndex: 2,
    61.     PageSize: 10
    62. })
    63.  
    64.  
    65. // -------------------- 载入数据 --------------------
    66. const tableData: Ref<Array<Agency>> = ref<Array<Agency>>([])
    67. const load = async () => {
    68.     console.log("load中：" + parms.value.Aname)
    69.     let res = await getAgency(parms.value) as any
    70.     // console.log("查询结果：" + res as Array)
    71.     tableData.value = res as Array<Agency>
    72. }
    73. // 查询
    74. const searchVal = ref("")
    75. const Search = async () => {
    76.     parms.value.Aname = searchVal.value
    77.     // console.log("parms.value.Aname:" + parms.value.Aname)
    78.     await load()
    79. }
    80.  
    81. onMounted(async () => {
    82.     await load()
    83. })
    84.  
    85.  
    86.  
    87.  
    88.  
    89. // -------------------- 新增、修改、删除逻辑 Start --------------------
    90. const isShow = ref(false)
    91. const open = () => {
    92.     isShow.value = true
    93. }
    94. const closeAdd = () => {
    95.     isShow.value = false
    96.     info.value = new Agency()
    97. }
    98. const info: Ref<Agency> = ref<Agency>(new Agency());    //响应式对象
    99. const handleEdit = (index: number, row: Agency) => {
    100.     info.value = row
    101.     index ++
    102.     isShow.value = true
    103. }
    104. const success = async (message: string) => {
    105.     isShow.value = false
    106.     info.value = new Agency()
    107.     ElMessage.success(message)
    108.     await load()
    109. }
    110. const handleDelete = async (index: number, row: Agency) => {
    111.     await delAgency(row.Id)
    112.     index ++
    113.     await load()
    114. }
    115.  
    116. const tb = ref<InstanceType<typeof ElTable>>()
    117.  
    118. // -------------------- 设置分页 ----------------------
    119. const pageSize = ref(10); // Number of records to display per page
    120.  
    121. // Handle page change
    122. const handlePageChange = async (page: number) => {
    123.     // parms.PageIndex = page;
    124.     page ++;
    125.     // page = 10;
    126.     await load();
    127. };
    128.  
    129.  
    130. const { Permission } = toRefs(store);
    131. const Dagency = ref(Permission.value.Dagency);
    132. const Fagency = ref(Permission.value.Fagency);
    133. const Iagency = ref(Permission.value.Iagency);
    134. const Sagency = ref(Permission.value.Sagency);
    135.  
    136. // Excel
    137. const handleExport = () => {
    138.     const columnHeaders = ['经办人编号', '姓名', '性别', '电话', '备注'];
    139.     exportToExcel(tableData.value, '经办人信息', columnHeaders);
    140. };
    141.  
    142. script>

    修改后：

    1. <template>
    2.     <el-card class="box-card">
    3.         <el-row>
    4.             <el-col :span="5">
    5.                 <el-input v-model="searchVal" placeholder="请输入需要查询内容" @change="Search" />
    6.             el-col>
    7.             <el-col :span="12">
    8.                 <el-button :disabled="!Sagency" type="primary" @click="Search">查询el-button>
    9.                 <el-button :disabled="!Iagency" @click="open" type="primary">新增el-button>
    10.                 <el-button type="primary" @click="handleExport">导出Excelel-button>
    11.             el-col>
    12.         el-row>
    13.         <br>
    14.         <el-row>
    15.             <el-col>
    16.                 <el-table :data="paginatedData" style="width: 100%;height: 65vh;" border ref="tb">
    17.                     <el-table-column type="selection" width="55" />
    18.                     <el-table-column prop="Ano" label="编号" width="150" />
    19.                     <el-table-column prop="Aname" label="姓名" width="150" />
    20.                     <el-table-column prop="Asex" label="性别" width="150" />
    21.                     <el-table-column prop="Aphone" label="电话" width="150" />
    22.                     <el-table-column prop="Aremark" label="备注" width="190" />
    23.  
    24.                     <el-table-column label="操作" align="center">
    25.                         <template #default="scope">
    26.                             
    27.                             <el-button :disabled="!Fagency" size="small" @click="handleEdit(scope.$index, scope.row)">修改el-button>
    28.                             <el-button :disabled="!Dagency" size="small" type="danger"
    29.                                 @click="handleDelete(scope.$index, scope.row)">删除el-button>
    30.                         template>
    31.                     el-table-column>
    32.                 el-table>
    33.  
    34.                 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    35.                     :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="totalItems">
    36.                 el-pagination>
    37.             el-col>
    38.         el-row>
    39.         <add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success">add>
    40.     el-card>
    41. template>
    42. <script lang="ts" setup>
    43. import { ElMessage, ElTable } from 'element-plus';
    44. import { onMounted, Ref, ref, toRefs } from 'vue';
    45. import Agency from '../../../class/Agency';
    46. import { delAgency, getAgency } from '../../../http';
    47. import add from './add.vue';
    48. import useStore from '../../../store';
    49. import { exportToExcel } from '../../../tool/report'
    50. import { computed } from 'vue';
    51. const store = useStore()
    52. const total = ref(10)
    53. const parms = ref({
    54.     Id: 0,
    55.     Ano: "",
    56.     Aname: "",
    57.     Asex: "",
    58.     Aphone: "",
    59.     Aremark: "",
    60.     PageIndex: 2,
    61.     PageSize: 10
    62. })
    63.  
    64.  
    65. // -------------------- 载入数据 --------------------
    66. const tableData: Ref<Array<Agency>> = ref<Array<Agency>>([])
    67. const load = async () => {
    68.     console.log("load中：" + parms.value.Aname)
    69.     let res = await getAgency(parms.value) as any
    70.     // console.log("查询结果：" + res as Array)
    71.     tableData.value = res as Array<Agency>
    72. }
    73. // 查询
    74. const searchVal = ref("")
    75. const Search = async () => {
    76.     parms.value.Aname = searchVal.value
    77.     // console.log("parms.value.Aname:" + parms.value.Aname)
    78.     await load()
    79.     currentPage.value = 1; // 重置页码
    80. }
    81.  
    82. onMounted(async () => {
    83.     await load()
    84. })
    85.  
    86.  
    87.  
    88.  
    89.  
    90. // -------------------- 新增、修改、删除逻辑 Start --------------------
    91. const isShow = ref(false)
    92. const open = () => {
    93.     isShow.value = true
    94. }
    95. const closeAdd = () => {
    96.     isShow.value = false
    97.     info.value = new Agency()
    98. }
    99. const info: Ref<Agency> = ref<Agency>(new Agency());    //响应式对象
    100. const handleEdit = (index: number, row: Agency) => {
    101.     info.value = row
    102.     index ++
    103.     isShow.value = true
    104. }
    105. const success = async (message: string) => {
    106.     isShow.value = false
    107.     info.value = new Agency()
    108.     ElMessage.success(message)
    109.     await load()
    110. }
    111. const handleDelete = async (index: number, row: Agency) => {
    112.     await delAgency(row.Id)
    113.     index ++
    114.     await load()
    115. }
    116.  
    117. const tb = ref<InstanceType<typeof ElTable>>()
    118.  
    119.  
    120. const { Permission } = toRefs(store);
    121. const Dagency = ref(Permission.value.Dagency);
    122. const Fagency = ref(Permission.value.Fagency);
    123. const Iagency = ref(Permission.value.Iagency);
    124. const Sagency = ref(Permission.value.Sagency);
    125.  
    126. // Excel
    127. const handleExport = () => {
    128.     const columnHeaders = ['编号', '姓名', '性别', '电话', '备注'];
    129.     exportToExcel(tableData.value, '经办人信息', columnHeaders);
    130. };
    131.  
    132.  
    133.  
    134. // 实现分页
    135. const currentPage = ref(1);
    136. const pageSize = ref(10);
    137. const totalItems = computed(() => tableData.value.length);
    138. const paginatedData = computed(() => {
    139.     const start = (currentPage.value - 1) * pageSize.value;
    140.     const end = start + pageSize.value;
    141.     return tableData.value.slice(start, end);
    142. });
    143.  
    144.  
    145. const handleCurrentChange = (newPage) => {
    146.     currentPage.value = newPage;
    147. };
    148.  
    149. const handleSizeChange = (newSize) => {
    150.     pageSize.value = newSize;
    151. };
    152.  
    153.  
    154. script>

  • 相关阅读:
    学生静态HTML个人博客主页【Web大学生网页作业成品】HTML+CSS+JavaScript
    JAVA微信小程序浴室预约系统毕业设计 开题报告
    $ vue -Vbash: vue: command not found
    CloudFlare系列--使用第三方来自定义CDN的IP(笨牛详细版)
    1058 选择题 （利用ASCII码）
    【通信工程笔记】【终端与业务-第十二章】市场营销计划、实施和控制
    图像分割-Segment Anything实践
    【C++编程能力提升】
    【C语言】basename函数
    负载均衡 dubbo
  • 原文地址：https://blog.csdn.net/weixin_46407807/article/details/134493506