如何为el-table组件添加序号

elemen-ui 我想大家并不陌生了，是一个很优秀的前端 vue 组件，能过够帮大家很轻松的搭建一套前端脚手架页面，今天的分享很简单，只是为了给初次使用的小伙伴提供参考。

当我们想在 el-table 中添加序号列时，如下：

<el-table-column
        label="序号"
        type="index"
        width="50"
        align="center">
</el-table-column>

如果你只是这样写的话，你会发现我们在翻页时，序号永远都是从 1 开始。因为每一次翻页都是根据当前数据的 index 显示，所以我们要自定义一下，如下修改：

<el-table-column
        label="序号"
        type="index"
        width="50"
        align="center">
    <template scope="scope">
        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
    </template>
</el-table-column>

这里关键性的代码是：

(page - 1) * pageSize + scope.$index + 1

上面的意思就是(当前页 – 1) * 当前显示数据条数 + 当前行数据的索引 + 1。

page 和 pageSize 需要在下面的 data 中定义，

最后效果

以上关于如何为el-table组件添加序号的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。