vue 基于 Ant Design 实现表格序号

原创已于 2022-04-12 14:54:48 修改 · 7.4k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-12 14:53:54 首次发布

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了两种不同的前端表格序号排序方式。方式1是在每一页重新排序，方式2则保持分页后的连续序号。通过定制表格列的`customRender`属性，分别展示了实现这两种效果的代码片段。对于前端开发人员来说，理解并掌握这些技巧对于提升用户体验至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两种方式（不分页排序和分页排序）

方式1、每一页的序号都重新排序
方式2、基于分页的序号，点击下一页会自动往后继续排序。

方式1 实现效果：

请添加图片描述

方式1 实现代码：

    // 表头
    const logColumns = [

        {
            title: '序号',
            align: "center",
            width: 60,
            customRender: ({ text, record, index }) => {
                return `${ index + 1 }`;
            }
        },
    ];

方式2 实现效果：

分页的代码此处就不贴出了

在这里插入图片描述

方式2 实现代码：

 // 表头
    const logColumns = [
       {
            title: '序号',
            align: "center",
            width: 60,
            customRender: ({ text, record, index }) => {
                return `${ (pageNo.value - 1) * pageSize.value + index + 1}`;
            }
        }, 
    ];