el-table 添加“序号“列和分页时，控制后面几页的index不从1开始

最新推荐文章于 2024-10-17 09:19:32 发布

String佳佳

最新推荐文章于 2024-10-17 09:19:32 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue+elementui相关知识点和难点

本文链接：https://blog.csdn.net/weixin_44171757/article/details/104670309

vue+elementui相关知识点和难点专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何在Element UI中使用表格组件显示数据，并实现自定义序号及分页功能。通过示例代码展示了如何设置表格的序号列，以及如何通过分页组件控制数据展示，包括页面大小和当前页数的调整。

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

给“序号”列添加 :index=“indexMethod”

<el-table
       ref="table2"
       :data="tableData2"
       highlight-current-row
       style="width: 100%">
       <el-table-column
	           fixed
	           label="序号"
	           type="index"
	           :index="indexMethod"
	           width="50">
       </el-table-column>
</el-table>

 <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="pagination.pageSizes"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
</el-pagination>

data(){
	return{
		pagination:{
           pageSizes:[10,15,20,25],
           total:0,
           pageSize:10,
           currentPage:1
        }
	}
}
methods:{
	indexMethod(index){
        return (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
   },
}