VUE 表格中实现序号的两种方式

最新推荐文章于 2025-07-14 16:41:14 发布

蹦豆蹦

最新推荐文章于 2025-07-14 16:41:14 发布

阅读量5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_42736065/article/details/103409871

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了在Element UI的表格组件中实现自定义序号显示的两种方法。第一种方法通过模板插槽结合分页参数计算序号，第二种方法则通过自定义索引函数实现。这些技巧有助于开发者灵活控制表格数据的呈现。

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

表格中实现序号的两种方式

方式一


<el-table-column type="index" label="序号" align="center" width="50">
	<template slot-scope="scope">
		<span>{{scope.$index + (page)*size + 1}}</span>
	</template>
</el-table-column>

data() {
	return {
		page:0,
		size:10
	}
}

方式二

<el-table-column type="index" :index="indexMethod"  label="序号" align="center" width="50"></el-table-column>

indexMethod(index) {
	return index + this.pageSize * (this.currentPage - 1) + 1;
},