如何为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 中定义，

最后效果