如何为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组件添加序号

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何为el-table组件添加序号

发表评论