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 3.0引入百度地图不兼容的解决办法,本文通过实例代码给大家分享解决方法，需要的朋友可以参考下2022-08-08
这篇文章主要和大家一起学习vue.js表单控件绑定操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要给大家介绍了Vue实现订单支付倒计时功能,倒计时这要运用在创建订单后15分钟内进行支付,否则订单取消,本文结合示例代码给大家详细讲解,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue-cli3 打包优化之 splitchunks的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
凡事有好就又坏，想必大家都知道Vue的作用与优点，但是使用的规程中也总是有很多问题，接下来小编就来向大家讲解使用Vue时应注意的一些问题，希望能帮助到大家2021-09-09
本文介绍关于Vue.js项目中时间选择器组件的问题,当选择后清空导致值变为null,进而引发后台接口报错,通过监听`overallForm.time`的值并设置为空数组,成功解决此问题,确保了数据正确性,同时,建议避免直接监听整个对象以优化性能,感兴趣的朋友一起看看吧2024-08-08
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，这篇文章主要介绍了vue route介绍、基本使用、嵌套路由,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue悬浮可拖拽悬浮按钮的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vue2.x对象单层劫持的原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
随着 Vue 3.3 引入的 defineModel 宏,开发者可以更加简洁地实现组件内部的双向数据绑定,下面就跟随小编一起来学习一下如何使用defineModel实现双向绑定吧2024-12-12
最新评论