Element-ui el-table分页后设置连续的索引

492 阅读1分钟

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方法

注意:下面这块代码里的pageNumberpageSize要和自己定义分页相关的内容保持统一(写在methods中即可)

indexMethod(index) {
  return index + 1 + (this.pageNumber - 1) * this.pageSize
},