Vue使用Element-UI生成并展示表头序号的方法
作者：小花皮猪 发布时间：2024-06-05 10:04:27
标签：vue,Element-UI,序号
前言
序号算是在展示数据的时候，一种很普遍的属性了，我们可以自己写生成序号的规则，也可以借助第三方。
这里我选择后者，使用Element-UI自带的一个table属性，去生成并展示需要
首先看下我的页面，是没有序号的，这样看起来有点凌乱，缺少什么东西一样。
生成序号
在Element-UI官网中的table的众多demo下，有这么一个demo：
我们可以利用里面的代码，生成序号，demo里面的代码比较长，我把核心代码抽取出来了，如下：
<el-table-column
type="index"
:index="indexMethod">
</el-table-column>
methods: {
indexMethod(index) {
return index * 2;
}
}
使用序号
把上面的核心代码放到组件里面，一个最简单的序号就出现了：
这里我为了展示这两块核心的代码，删除了我的表格属性省略了部分代码
自定义序号
这里简单解释下，index是从0开始的，因为返回的是index*2，所以相当于每次0+=2这样递增，我们可以抓住这个特性，改变自增规则，实现自己想要的序号类型。
比如我现在想要从1开始，每次自增1，就可以这样：
这里我感觉表头不美观，就新增了一些属性，比如宽度，文本居中，表头描述等
这样一个自己想要的表头序号就诞生了！
核心代码：
<!-- 序号 -->
<el-table-column
type="index"
width="90"
align="center"
:index="indexMethod"
label="序号">
</el-table-column>
// 生成表头序号
indexMethod(index) {
return index ;
},
当然，你可以根据自己想要的规则进行随意定义，满足自己的需求即可。
注意
index是用0开始的，如果不自增1就会是这样的：
序号一般都是从0开始的，这样会显得很怪。
只看序号好像有点难受，最后放一个完整版的数据，这样就好多了，也显示出序号的作用
来源：https://blog.csdn.net/weixin_46713508/article/details/128637443
0
投稿猜你喜欢
- 代码如下:--根据MAX(MIN)ID CREATE PROC [dbo].[proc_select_id] @pageindex int=
半透明效果有时候会给页面增加不少色彩，特别是Vista盛行之后，半透明效果更加受推崇。在诸多可用于Web浏览的图片格式中，只有PNG格式和G- 前言print()函数用来将信息输出到控制台如果希望输出文字信息的同时,一起输出数据,可以使用格式化操作符％,格式化操作符负责处理字符串中的
- 二进制数据结构Struct在C/C++语言中，struct被称为结构体。而在Python中，struct是一个专门的库，用于处理字节串与原生
- /** * 对数据进行编码转换 * @param array/string $data
- 安装的方式很常规，直接使用pip安装就行了。pip install fpdf将需要使用的三方模块导入进来from fpdf import F
- 众所周知，IE 6只支持单通道的PNG图片（即只有透明/不透明2种状态，gif图片的透明单通道透明），因此如果需要使用alpha透明的png
- 昨天美国雅虎正式宣布网站首页的新版，这也算互联网一件大事，尤其是对设计的朋友们。而且现在的美国雅虎的情况也不是很好的情况下有大刀阔斧的进行改
- 1. 连接对象操作数据库之前，首先要建立数据库连接。有下面几个方法进行连接。>>>import cx_Oracle>
- 本文实例讲述了Python实现处理管道的方法。分享给大家供大家参考。具体分析如下：Linux下的可以施展的最炫的魔法是什么？相信不同的人说法
- 前言：作为一个.NET开发者而已，有着宇宙最强IDE：Visual Studio加持，让我们的开发效率得到了更好的提升。我们不需要担心环境变
- 了兑现我对大家的承诺，我们现在立即就将“借助数据库和ASP程序”编写出来的，可以同时适用于IIS和P
- 一、查看存储过程存储过程创建以后，用户可以通过SHOW STATUS语句来查看存储过程的状态，也可以通过SHOW CREATE语句来查看存储
- 本文实例讲述了Python时间的精准正则匹配方法。分享给大家供大家参考，具体如下：要用正则表达式精准匹配时间，其实并不容易方式一:>&
- python的列表list可以用for循环进行遍历，实际开发中发现一个问题，就是遍历的时候删除会出错，例如l = [1,2,3,4]for
- 字符串在内存中是不可变的，放在只读内存段，因此你可以使用str[0]来访问，但是不能使用str[0]='a'来修改。修改字符
- Flask是一个Python编写的Web 微框架，让我们可以使用Python语言快速实现一个网站或Web服务。本文参考自Flask官方文档，
- 谷歌驱动下载地址：http://chromedriver.storage.googleapis.com/index.html一、seleni
- 前言之前写过一篇关于阿里的低代码工具LowCodeEngine 的文章，发现大家还是挺感兴趣的。最近又发现了一款很有意思的低代码工具Yao，
- 数据分组使用 groupby() 方法进行分组group.size()查看分组后每组的数量group.groups 查看分组情况group.
