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开始的,这样会显得很怪。

在这里插入图片描述

只看序号好像有点难受,最后放一个完整版的数据,这样就好多了,也显示出序号的作用

在这里插入图片描述

  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小花皮猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值