外贸网站建设 深圳seo综合优化公司

需求说明：

        项目中经常会用到的一个场景，表格第一列显示序号（1、2、3...），但是在翻页后要递增显示序号，例如10、11、12（假设一页显示10条数据），针对这种情况，封装了一个vue的组件。

核心代码：

1，定义组件

<template><el-table-column type="index" label="序号" width="61"><template #default="scope">{{ (page - 1) * pageSize + scope.$index + 1 }}</template></el-table-column>
</template><script setup>
defineProps({// 当前页码page: {type: Number,default: 1,},// 每页显示数量pageSize: {type: Number,default: 10,},
});
</script>

2，父组件引用

<el-table v-loading="loading" :data="tableData" border><!-- 引用序号组件 --><TableIndexColumn :page="page.pageNo" :pageSize="page.pageSize" /><el-table-column prop="userName" label="用户名"><template #default="scope">{{ scope.row.employeeNo }}</template></el-table-column><el-table-column prop="email" label="邮箱"><template #default="scope">{{ scope.row.email }}</template></el-table-column>
</el-table>
<el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":layout="layout":page-sizes="pageSizes":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"
/>