实现效果

表格序号从0开始递增，换页也是接着第一页的序号开始递增

代码实现——HTML部分

用TDesign的组件t-table，详细的内容可以查看官方文档

<t-table:data="data":columns="COLUMNS":row-key="ROW_KEY"bordered:hover="true":pagination="pagination":loading="dataLoading"@page-change="onPageChange"></t-table>

代码实现——表格数据字段部分

本例将表格数据字段存储在ts文件中，也可以写在script里，看个人需求，官方文档里也有可以看看

export const ROW_KEY = 'index'
export const COLUMNS = [{title: '序号',colKey: 'index',ellipsis: true,align: 'center',},{title: 'xxx',colKey: 'xxxx',ellipsis: true,align: 'center',},{title: '操作',colKey: 'op',width: 200,fixed: 'right',align: 'center',},
]

代码实现——JS部分

该功能的关键代码就是for循环，遍历后端传过来的数据，依次将表格序号index属性赋值，i从0开始，你要从1开始就再 + 1就好了，如果想要每一页都从0开始，而不是接着上一页的序号递增，就直接
res.data[i].index = i ，本例是每页都接着上一页递增，因此需要加上（当前页-1）*当前页面条数
(pageParams.pageCurrent - 1) * pageParams.pageSize（不理解就自己捋捋，数学逻辑问题）

const fetchData = async () => {dataLoading.value = truetry {const pageParams = {pageCurrent: pagination.current,pageSize: pagination.pageSize,}//获取后端数据，本例将接后端接口的代码写在了ts里，这里就直接调用了const res = await queryPage(pageParams, queryParams)//功能实现的关键代码（for)for (let i = 0; i < res.data.length; i++) {res.data[i].index = i + (pageParams.pageCurrent - 1) * pageParams.pageSize}data.value = res.datapagination.total = res.total} catch (e) {console.log(e)} finally {dataLoading.value = false}
}

vue3+TDesign实现表格序号递增(t-table)相关推荐

jsp中表格序号递增，varStatus=“vs“
jsp中表格序号递增,varStatus="vs" 通过在百度上查看,发现是属于JSTL 标签.我具体说一下用途吧就是删除/新增的时候,序号总是连续的从1开始排列,序号的数据与数 ...
【React】Antd实现表格序号递增
直接上代码: const columns = [{title: '序号',dataIndex: 'index',render:(text,record,index)=>`${index+1}`, ...
element-ui 带序号表格如何让序号递增
在使用element-UI的el-table时,我们添加了type="index" ,如果设置了 index 则显示该行的索引(从 1 开始计算). 但是每一页都是从1开始计算.当 ...
LaTeX 改变表格序号 1, 2(a), 2(b), 3
问题描述局部修改表格编号用LaTeX进行排版时,模板一般会按照表格在文章中出现的顺序对其进行递增编号,如下图左侧所示,即紧随 Table 1 的表格为Table 2 和 Table 3 .然而有时 ...
批量重命名照片为序号递增的形式
现在手机拍照的像素已经很高了,在非专业的情况下,我们拍摄一些新媒体的文章照片都是采用手机.手机拍照又方便又轻便,还可以一键修图.但是有个问题手机拍的照片导出到电脑,名称都是系统自带的英文,而且序号有时 ...
表格序号_如何让表格序号自动更新，四个函数让表格实现自动化、高效操作
工作中我们使用Excel登记数据的时候经常会碰到个问题,当我们在原始数据删除.隐藏行后,都需要重新更新一次表格序号.今天我们就来学习一下,如何解决表格自动更新序号的问题. 案例演示: 案例说明:如上图 ...
基于SpringBoot+EasyExcel+vue3实现excel表格的导入和导出
目录基于SpringBoot+EasyExcel+vue3实现excel表格的导入和导出一.导入和导出二.导出数据为excel实现过程三.将excel中的数据导入到数据库中基于SpringB ...
NPOI导出word，NPOI导出word表格，NPOI复制table表格 XWPFDocument中XWPFTable
NPOI导出word,NPOI导出word表格,NPOI复制table表格 XWPFDocument中XWPFTable 使用NPOI可以对Word中的文本做替换,当遇到表格时,单个表格也可以循环遍历 ...
elementUI分页删除最后一页数据时跳转回上一页并且el-table序号递增
elementUI分页删除最后一页数据时跳转回上一页 queryParams: {current: 1,//当前页数size: 10,//每页条数channel: undefined,}, const ...
wps表格序号怎么拉下去123456自动排列
WPS表格在日常办公中的使用是比较频繁的,为了使每一行的数据显示的更加清晰,大家可以给WPS表格添加序号,如何在表格中实现拉下去自动排列123456呢? 其实,实现序号自动排列的方法是比较简单的,下面 ...

vue3+TDesign实现表格序号递增(t-table)

实现效果

代码实现——HTML部分

代码实现——表格数据字段部分

代码实现——JS部分

vue3+TDesign实现表格序号递增(t-table)相关推荐

最新文章

热门文章