element-ui el-table分页后设置连续的索引(如排行榜)-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui el-table分页后设置连续的索引(如排行榜)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、自定义 type=index 列的行号

2、自定义indexMethod方法

3、效果

1、自定义 type=index 列的行号

通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。

<el-table
                    class="table-mb"
                    v-loading="loading"
                    :data="arr_data"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                >
                    <el-table-column label="排名" type="index" :index="indexMethod" width="120" />
                    <el-table-column label="商品" min-width="240">
                        <template #default="{ row }">
                            <div class="table-lr">
                                <el-image
                                    class="table-lr__img img-small"
                                    loading="lazy"
                                    :src="proxy.imgUrl + row.product_img"
                                    fit="cover"
                                    v-if="row.product_img"
                                />
                                <div class="table-lr__right small-right">
                                    <p class="lr-user line-one">{{ row.product_name }}</p>
                                    <p>ID：{{ row.product_common_id }}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sales" label="销量" min-width="180" />
                    <el-table-column prop="level" label="等级" min-width="180" />
                    <el-table-column label="规格" min-width="180">
                        <template #default="{ row }"> {{ row.norm }}/{{ row.unit }} </template>
                    </el-table-column>
                </el-table>

2、自定义indexMethod方法

// vue3

const indexMethod = (index) => {
    return index + 1 + (page.value - 1) * pageSize.value
}

// vue2

indexMethod = (index) => {
    return index + 1 + (this.page- 1) * this.pageSize
}