当前位置： 首页 > article >正文

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

article 2024/9/25 5:26:25

前提：先把pagination安装上先

1、在script中加上

        

// 实现分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = computed(() => tableData.value.length);
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});


const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
};

const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
};

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

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

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

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

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

修改前和修改后对比

修改前：

<template>
    <el-card class="box-card">
        <el-row>
            <el-col :span="5">
                <el-input v-model="searchVal" placeholder="请输入需要查询内容" @change="Search" />
            </el-col>
            <el-col :span="12">
                <el-button :disabled="!Sagency" type="primary" @click="Search">查询</el-button>
                <el-button :disabled="!Iagency" @click="open" type="primary">新增</el-button>
                <el-button type="primary" @click="handleExport">导出Excel</el-button>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col>
                <el-table :data="tableData" style="width: 100%;height: 65vh;" border ref="tb">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="Ano" label="编号" width="150" />
                    <el-table-column prop="Aname" label="姓名" width="150" />
                    <el-table-column prop="Asex" label="性别" width="150" />
                    <el-table-column prop="Aphone" label="电话" width="150" />
                    <el-table-column prop="Aremark" label="备注" width="190" />

                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <!-- 将这一行的数据都传出去 -->
                            <el-button :disabled="!Fagency" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button :disabled="!Dagency" size="small" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="total" /> -->
                <!-- <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="pageSize"
                    @current-change="handlePageChange" /> -->
                <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="total"
                    :current-page="parms.PageIndex" :page-size="pageSize" @current-change="handlePageChange" />
            </el-col>
        </el-row>
        <add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></add>
    </el-card>
</template>
<script lang="ts" setup>
import { ElMessage, ElTable } from 'element-plus';
import { onMounted, Ref, ref, toRefs } from 'vue';
import Agency from '../../../class/Agency';
import { delAgency, getAgency } from '../../../http';
import add from './add.vue';
import useStore from '../../../store';
import { exportToExcel } from '../../../tool/report'

const store = useStore()
const total = ref(10)
const parms = ref({
    Id: 0,
    Ano: "",
    Aname: "",
    Asex: "",
    Aphone: "",
    Aremark: "",
    PageIndex: 2,
    PageSize: 10
})


// -------------------- 载入数据 --------------------
const tableData: Ref<Array<Agency>> = ref<Array<Agency>>([])
const load = async () => {
    console.log("load中：" + parms.value.Aname)
    let res = await getAgency(parms.value) as any
    // console.log("查询结果：" + res as Array<Agency>)
    tableData.value = res as Array<Agency>
}
// 查询
const searchVal = ref("")
const Search = async () => {
    parms.value.Aname = searchVal.value
    // console.log("parms.value.Aname:" + parms.value.Aname)
    await load()
}

onMounted(async () => {
    await load()
})





// -------------------- 新增、修改、删除逻辑 Start --------------------
const isShow = ref(false)
const open = () => {
    isShow.value = true
}
const closeAdd = () => {
    isShow.value = false
    info.value = new Agency()
}
const info: Ref<Agency> = ref<Agency>(new Agency());    //响应式对象
const handleEdit = (index: number, row: Agency) => {
    info.value = row
    index ++
    isShow.value = true
}
const success = async (message: string) => {
    isShow.value = false
    info.value = new Agency()
    ElMessage.success(message)
    await load()
}
const handleDelete = async (index: number, row: Agency) => {
    await delAgency(row.Id)
    index ++
    await load()
}

const tb = ref<InstanceType<typeof ElTable>>()

// -------------------- 设置分页 ----------------------
const pageSize = ref(10); // Number of records to display per page

// Handle page change
const handlePageChange = async (page: number) => {
    // parms.PageIndex = page;
    page ++;
    // page = 10;
    await load();
};


const { Permission } = toRefs(store);
const Dagency = ref(Permission.value.Dagency);
const Fagency = ref(Permission.value.Fagency);
const Iagency = ref(Permission.value.Iagency);
const Sagency = ref(Permission.value.Sagency);

// Excel
const handleExport = () => {
    const columnHeaders = ['经办人编号', '姓名', '性别', '电话', '备注'];
    exportToExcel(tableData.value, '经办人信息', columnHeaders);
};

</script>

修改后：

<template>
    <el-card class="box-card">
        <el-row>
            <el-col :span="5">
                <el-input v-model="searchVal" placeholder="请输入需要查询内容" @change="Search" />
            </el-col>
            <el-col :span="12">
                <el-button :disabled="!Sagency" type="primary" @click="Search">查询</el-button>
                <el-button :disabled="!Iagency" @click="open" type="primary">新增</el-button>
                <el-button type="primary" @click="handleExport">导出Excel</el-button>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col>
                <el-table :data="paginatedData" style="width: 100%;height: 65vh;" border ref="tb">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="Ano" label="编号" width="150" />
                    <el-table-column prop="Aname" label="姓名" width="150" />
                    <el-table-column prop="Asex" label="性别" width="150" />
                    <el-table-column prop="Aphone" label="电话" width="150" />
                    <el-table-column prop="Aremark" label="备注" width="190" />

                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <!-- 将这一行的数据都传出去 -->
                            <el-button :disabled="!Fagency" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button :disabled="!Dagency" size="small" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="totalItems">
                </el-pagination>
            </el-col>
        </el-row>
        <add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></add>
    </el-card>
</template>
<script lang="ts" setup>
import { ElMessage, ElTable } from 'element-plus';
import { onMounted, Ref, ref, toRefs } from 'vue';
import Agency from '../../../class/Agency';
import { delAgency, getAgency } from '../../../http';
import add from './add.vue';
import useStore from '../../../store';
import { exportToExcel } from '../../../tool/report'
import { computed } from 'vue';
const store = useStore()
const total = ref(10)
const parms = ref({
    Id: 0,
    Ano: "",
    Aname: "",
    Asex: "",
    Aphone: "",
    Aremark: "",
    PageIndex: 2,
    PageSize: 10
})


// -------------------- 载入数据 --------------------
const tableData: Ref<Array<Agency>> = ref<Array<Agency>>([])
const load = async () => {
    console.log("load中：" + parms.value.Aname)
    let res = await getAgency(parms.value) as any
    // console.log("查询结果：" + res as Array<Agency>)
    tableData.value = res as Array<Agency>
}
// 查询
const searchVal = ref("")
const Search = async () => {
    parms.value.Aname = searchVal.value
    // console.log("parms.value.Aname:" + parms.value.Aname)
    await load()
    currentPage.value = 1; // 重置页码
}

onMounted(async () => {
    await load()
})





// -------------------- 新增、修改、删除逻辑 Start --------------------
const isShow = ref(false)
const open = () => {
    isShow.value = true
}
const closeAdd = () => {
    isShow.value = false
    info.value = new Agency()
}
const info: Ref<Agency> = ref<Agency>(new Agency());    //响应式对象
const handleEdit = (index: number, row: Agency) => {
    info.value = row
    index ++
    isShow.value = true
}
const success = async (message: string) => {
    isShow.value = false
    info.value = new Agency()
    ElMessage.success(message)
    await load()
}
const handleDelete = async (index: number, row: Agency) => {
    await delAgency(row.Id)
    index ++
    await load()
}

const tb = ref<InstanceType<typeof ElTable>>()


const { Permission } = toRefs(store);
const Dagency = ref(Permission.value.Dagency);
const Fagency = ref(Permission.value.Fagency);
const Iagency = ref(Permission.value.Iagency);
const Sagency = ref(Permission.value.Sagency);

// Excel
const handleExport = () => {
    const columnHeaders = ['编号', '姓名', '性别', '电话', '备注'];
    exportToExcel(tableData.value, '经办人信息', columnHeaders);
};



// 实现分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = computed(() => tableData.value.length);
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});


const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
};

const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
};


</script>


http://www.kler.cn/news/134134.html

相关文章：

  • 全新云开发工具箱：融合多项功能的微信小程序源码解决方案
  • 深眸科技革新升级OCR技术，与AI视觉实现有效融合赋能各行业应用
  • 选择最适合你的框架和语言，打造出色的Windows界面程序
  • Java学习笔记43——函数式接口
  • C++多线程编程（1）：线程的创建方式
  • Node.js之TCP（net）
  • python 词云 wordcloud使用paddle模式 庆余年人物分析--不是特别准，可以看着玩一玩
  • 基于深度学习的单帧图像超分辨率重建综述
  • Postman接收列表、数组参数@RequestParam List＜String＞ ids
  • C练习题_13
  • Zabbix实现故障自愈
  • rabbitmq默认交换机锁绑定的routingkey-待研究
  • ICASSP2023年SPGC多语言AD检测的论文总结
  • 算法设计与分析复习--贪心（二）
  • 开源更安全? yum源配置/rpm 什么是SSH?
  • yolov5模型代码怎么修改
  • Cesium+Vue：地形开挖
  • Ps：变换
  • 应用协议安全：Rsync-common 未授权访问.
  • Vue3+Vite实现工程化，事件绑定以及修饰符
  • C# GC机制
  • aspose.cells java合并多个excel
  • SpringCloud微服务注册中心：Nacos介绍，微服务注册，Ribbon通信，Ribbon负载均衡，Nacos配置管理详细介绍
  • 【算法】树形DP③ 监控二叉树 ⭐（二叉树染色二叉树灯饰）！
  • 设计模式-行为型模式-策略模式
  • Spring Cloud学习（十）【Elasticsearch搜索功能 分布式搜索引擎02】
  • 目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】三维重建
  • useEffect 和useLayoutEffect 的区别
  • CSS 文本属性篇
  • VMware——WindowServer2012R2环境mysql5.7.14解压版安装主从复制（图解版）