自研国产零依赖前端UI框架实战006 实现表格分页的功能

摘要：import zdp_table1 from"./zdpui/components/zdp_table1.vue";import random from"./zdpui/js/random.js";const columns = [{

前言

通过前面的努力, 我们已经封装了第一个表格组件, 但是我们还没有实现分页的功能.

分页这个功能在web开发中属于比较常见的了, 我们最好不要和table组件放一块, 可以单独封装一下.

那么我们直接开开搞吧.

基础分页

首先我们在App.vue里面添加分页的元素:

在这里插入图片描述

我们美化一下样式, 让其实现居中对齐, 充满科技感的分页效果.

import zdp_table1 from"./zdpui/components/zdp_table1.vue";
import random from"./zdpui/js/random.js";

const columns = [
{
title: "员工编号",
key: "id",
width: 80,
align: "center"
},
{
title: "姓名",
key: "name",
width: 100,
align: "center"
},
{
title: "年龄",
key: "age",
width: 100,
align: "center"
}
]
const data = random.users(3)

:columns="columns"
:data="data"
/>

首页
上一页
1
2
3
4
5
下一页
末页

.page {
width: fit-content;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}

.pageul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}

.pageulli {
margin: 010px;
padding: 10px20px;
cursor: pointer;
border-radius: 5px;
color: #fff;
transition: all 0.3s ease;
/* 使用线性渐变作为背景 */
background: linear-gradient(to bottom, #00A8FF, #0088cc);
}

.pageulli:hover {
/* 悬停时使用更亮的渐变 */
background: linear-gradient(to bottom, #00C8FF, #00A8FF);
box-shadow: 0010pxrgba(0, 168, 255, 0.8);
transform: translateY(-2px);
}

.pageulli:active {
/* 点击时使用稍暗的渐变 */
background: linear-gradient(to bottom, #0088cc, #0066aa);
box-shadow: 005pxrgba(0, 102, 170, 0.8) inset;
transform: scale(0.95);
}

这个时候界面渲染效果如下, 美观多了.

在这里插入图片描述

封装分页组件

接下来就把分页相关的功能封装到一个组件中, 这样便于独立的维护和复用.

处于分页也可能有多种分页的考虑,我决定封装一个zdp_page1这样的组件.

此时, 我的项目结构如下:

在这里插入图片描述

界面的渲染效果还是原来那样, 很完美, 此时App.vue完整代码如下:

import zdp_table1 from "./zdpui/components/zdp_table1.vue";import zdp_page1 from "./zdpui/components/zdp_page1.vue";import random from "./zdpui/js/random.js";const columns = [ { title: "员工编号", key: "id", width: 80, align: "center" }, { title: "姓名", key: "name", width: 100, align: "center" }, { title: "年龄", key: "age", width: 100, align: "center" }]const data = random.users(3)

完善分页组件

当前的分页组件过于简单了, 不支持传参, 也不支持监听点击事件, 我们来优化一下.

首先, 在分页的样式文件里面加一种激活时的样式:

.page1ulli.active {
background-color: #FF4500;
background-image: linear-gradient(rgb(5, 39, 175), rgb(30, 60, 200));
color: white;
}

接着调整分页组件的代码:

import {ref, computed} from'vue';
import"../css/page.css";

// 接收外部传入的当前页、每页数量和总数据量
const props = defineProps({
page: {
type: Number,
default: 1,
},
size: {
type: Number,
default: 8,
},
total: {
type: Number,
default: 100,
}
});

// 计算总页数
const totalPage = computed( =>Math.ceil(props.total / props.size));

// 计算可见的分页按钮数字
const visiblePages = computed( => {
let start = Math.max(1, props.page - 2);
let end = Math.min(totalPage.value, props.page + 2);
let pages = ;
for (let i = start; i <= end; i++) pages.push(i)
return pages;
});

// 触发点击事件，更新当前页并发出事件
const emit = defineEmits(['change']);
const goToPage = (page) => {
if (page < 1) page = 1;
if (page > totalPage.value) page = totalPage.value;
emit('change', page);
};

首页
上一页

v-for="v in visiblePages"
:key="v"
:class="{ active: v === page }"
@click="goToPage(v)"
>
{{ v }}

下一页
末页

修改一下App.vue, 使用这个分页组件:

import zdp_table1 from"./zdpui/components/zdp_table1.vue";
import zdp_page1 from"./zdpui/components/zdp_page1.vue";
import random from"./zdpui/js/random.js";
import {ref} from"vue";

const columns = [
{
title: "员工编号",
key: "id",
width: 80,
align: "center"
},
{
title: "姓名",
key: "name",
width: 100,
align: "center"
},
{
title: "年龄",
key: "age",
width: 100,
align: "center"
}
]
const data = random.users(3)

const page = ref(1);
const size = ref(10);
const total = ref(100);

const onChangePage = (v) => page.value = v

:columns="columns"
:data="data"
/>
:page="page"
:size="size"
:total="total"
@change="onChangePage"
/>

在这里插入图片描述

不过我们分页变化以后, 数据并没有跟着变化, 我们继续完善一下代码.

数据随着分页改变

要实现数据随着分页改变, 最简单的方式就是分页变化以后, 重新生成随机的用户数据.

const page = ref(1);
const size = ref(10);
const total = ref(100);
const data = ref(random.users(size.value))

const onChangePage = (v) => {
page.value = v
data.value = random.users(size.value)
}

这个时候每次点击分页, 可以发现数据都会变化, 但是前面的id并没有跟着变.

那么该怎么解决这个id没有跟着变化的问题呢?

我想到的一个解决方案就是增强随机数据模块, 提供一个根据分页获取随机用户信息的方法. 这个方法返回的是一个对象, 对象中用total标记总共有多少条数据, 用data存储当前页的数据.

解决id不变的问题

在随机模块中增加一个分页获取用户信息的方法:

functiongetPageUser(
page = 1,
size = 8,
total = 888,
) {
const startIndex = (page - 1) * size;
const endIndex = startIndex + size;
const result = ;
let id = startIndex + 1;
for (let i = startIndex; i < endIndex && i < total; i++) {
result.push({
id: id++,
name: name,
age: age
});
}
return {
total: total,
data: result
};
}

修改App.vue, 分页获取用户数据:

import zdp_table1 from "./zdpui/components/zdp_table1.vue";import zdp_page1 from "./zdpui/components/zdp_page1.vue";import random from "./zdpui/js/random.js";import {ref} from "vue";const columns = [ { title: "员工编号", key: "id", width: 80, align: "center" }, { title: "姓名", key: "name", width: 100, align: "center" }, { title: "年龄", key: "age", width: 100, align: "center" }]const page = ref(1);const size = ref(10);const total = ref(100);const data = ref(random.users(size.value))const onChangePage = (v) => { page.value = v const newData = random.getPageUser( page.value, size.value, ) data.value = newData.data total.value = total.value}

此时, 界面就会随着分页的变化而动态变化了.