vue 基于 Ant Design 实现表格序号

两种方式(不分页排序和分页排序)

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

方式1 实现效果:

vue 基于 Ant Design 实现表格序号_第1张图片

方式1 实现代码:

    // 表头
    const logColumns = [

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

方式2 实现效果:

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

vue 基于 Ant Design 实现表格序号_第2张图片

方式2 实现代码:

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

你可能感兴趣的:(vue,vue.js)