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展示表头序号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍的是基于Vue2的移动端环境搭建，移动端大家更多想到的是响应布局，我们根据不同大小的屏幕进行适配，当然少不了我们的重头戏rem，移动端相比pc端就没什么特别的了。我会一步一步带领大家进入Vue2的世界，感兴趣的朋友下面来一起学习学习吧。2016-11-11
最近在用Vue制作移动端项目,碰到了轮播图的制作,接下来就让小编一步一步带大家动作制作吧,下面这篇文章主要给大家介绍了关于vue中使用swiper轮播图的正确姿势,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vant中list的使用以及首次加载触发两次解决问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue为什么要谨慎使用$attrs与$listeners，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
这篇文章主要介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要给大家介绍了关于如何利用VUE创建视频流应用的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
这篇文章主要介绍了vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了浅谈Vue.js 组件中的v-on绑定自定义事件理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了Vue3.x中使用element-plus的各种方式详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue 的钩子函数，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
最新评论