关于el-table翻页后序号列递增的组件封装

需求说明：

        项目中经常会用到的一个场景，表格第一列显示序号（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-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :layout="layout"
    :page-sizes="pageSizes"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
/>