1、自定义 type=index 列的行号
通过给 type="index" 的列传入 index 属性,可以自定义索引。 该属性传入数字时,将作为索引的起始值。 也可以传入一个方法,它提供当前行的行号(从 0 开始)作为参数,返回值将作为索引展示。
<el-table
v-loading="loading"
:data="tableData"
height="calc(100vh - 430px)"
header-cell-class-name="table-header"
>
<!-- 下面这一行代码 -->
<el-table-column type="index" :index="indexMethod" label="序号" width="50" align="center" />
<el-table-column label="审批单号" prop="approvalSerial" align="center" />
<el-table-column label="产品名称" prop="productName" align="center" />
<el-table-column label="产品类型" prop="productType" align="center">
<template slot-scope="scope">
<div>{{ AppTypes[scope.row.productType || '001001'] }}</div>
</template>
</el-table-column>
<el-table-column label="申请时间" prop="applyTime" align="center" />
<el-table-column label="审核状态" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.approvalState | statusFilter">{{ scope.row.approvalState | statusName }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" @click="viewBtn(scope.row.productId)">查看详情</el-button>
<el-button type="text" @click="examineBtn(scope.row)">查看审批</el-button>
<el-button v-if="scope.row.approvalState==1" type="text" @click="revokeBtn(scope.row)">申请撤回</el-button>
<el-button v-if="scope.row.approvalState==4" type="text" @click="initiateBtn(scope.row)">重新发起</el-button>
</template>
</el-table-column>
</el-table>
2、自定义indexMethod方法
注意:下面这块代码里的pageNumber和pageSize要和自己定义分页相关的内容保持统一(写在methods中即可)
indexMethod(index) {
return index + 1 + (this.pageNumber - 1) * this.pageSize
},