如何为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组件添加序号
码云笔记 » 如何为el-table组件添加序号