Vue使用Element-UI生成并展示表头序号的方法
更新时间：2023年01月11日 11:29:19 作者：小花皮猪
序号算是在展示数据的时候，一种很普遍的属性了，我们可以自己写生成序号的规则，也可以借助第三方，这篇文章主要介绍了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开始的，这样会显得很怪。
只看序号好像有点难受，最后放一个完整版的数据，这样就好多了，也显示出序号的作用
到此这篇关于Vue使用Element-UI生成并展示表头序号的方法的文章就介绍到这了,更多相关vue Element-UI展示表头序号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue动态绘制四分之三圆环图效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了使用vue实现自定义多选与单选的答题功能,vue组件中在表单方面提供了一个v-model指令，非常好用，具体实现过程大家跟随脚本之家小编一起看看吧2018-07-07
这篇文章主要介绍了Vue3 实现网页背景水印功能,这里水印的字体大小、颜色和排布参考了企业微信的背景水印，使得看起来不那么突兀，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vant 自定义 van-dropdown-item的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
组件之间传递数据的方式有很多种，之所以有这么多种方式，是为了满足在不同场景不同条件下的使用。这篇文章主要介绍了vue中通过使用$attrs实现组件之间的数据传递,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue为什么要谨慎使用$attrs与$listeners，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
在我们的印象使用中，vue除了写业务代码没有特别新奇的功能了，今天就来看看如何自动化生成vue组件文档2021-06-06
vscode中eslint插件的配置（prettier配置无效）
这篇文章主要介绍了vscode中eslint插件的配置（prettier配置无效），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_N
这篇文章主要给大家介绍了关于解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue项目启动后如何在浏览器自动打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论