html tabl自动生成序列号,如何为el-table组件添加序号

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

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

label="序号"

type="index"

width="50"

align="center">

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

label="序号"

type="index"

width="50"

align="center">

这里关键性的代码是：

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

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

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

最后效果

html tabl自动生成序列号,如何为el-table组件添加序号相关推荐

html tabl自动生成序列号,Element-UI使用与爬坑集合
目录 Element-UI使用与爬坑集合一.Element-UI各UI控件属性使用加不加冒号(:)整理二.el-menu组件作为route-view时候,刷新页面后,默认active状态(defa ...
html tabl自动生成序列号,jQuery实现table中的tr上下移动并保持序号不变的实例代码...
jQueryMoveTr.html 代码如下: jQuery-bhang aaaaaaaaaa @@@@@@@ 注释1 bbbbbbbbbbbbb ######### 注释2 cccccccccccc ...
odoo12:自动生成序列号方法
为了我们插入数据的效率,我们会想到自动生成序列号.那么怎么生成预想的序列号呢?下面我们就来看看. 1.data/data.xml <?xml version="1.0" en ...
vue可视化拖拽生成工具_GitHub - 1260215278/dragUI: 基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件...
dragUI 用于UNI可拖拽可视化编程在线演示效果图基于快速开始参考uni官网安装普通uni项目(运行uni-app)运行到浏览器另需要手动下载包npm install 项目目录 col ...
IDEA 自动生成序列号
打开设置 Ctrl+Alt+S 下翻找到java, 展开找到Serialization issues , 展开 4. 下翻找到, 打钩 ,Apply 5, 光标放到类名上, Alt+Enter, 回 ...
自动生成的sitemap.html乱码,任意网站添加生成sitemap地图
[PHP] 纯文本查看复制代码<?php $dom = new DOMDocument("1.0", "utf-8"); header("Co ...
mysql修改字段为现在时间_mysql如何修改字段自动生成时间
mysql修改字段自动生成时间的方法:1.添加CreateTime设置默认时间:2.修改CreateTime设置默认时间:3.添加UpdateTime设置默认时间. 本教程操作环境:windows7系 ...
CSDN如何自动生成目录
文章目录 1.CSDN如何生成目录 2.一种方法是点击选中标题行,点击标题即可自动生成 3.大部分人说的添加目录我不会,哈哈哈哈 1.CSDN如何生成目录 2.一种方法是点击选中标题行,点击标题即可自 ...
Eclipse自动生成作者、日期注释功能设置
在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的. 修改作者.日期注释格式:打开Windows->Preferences->Java->Co ...

html tabl自动生成序列号,如何为el-table组件添加序号

html tabl自动生成序列号,如何为el-table组件添加序号相关推荐

最新文章

热门文章