需求說明：

????????項目中經常會用到的一個場景，表格第一列顯示序號（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"
/>