Vue使用Element-UI生成并展示表头序号

谁借莪１个温暖的怀抱￠ 2023-09-23 21:56 85阅读 0赞

## 前言 ##

序号算是在展示数据的时候，一种很普遍的属性了，我们可以自己写生成序号的规则，也可以借助第三方。

这里我选择后者，使用Element-UI自带的一个table属性，去生成并展示需要

首先看下我的页面，是没有序号的，这样看起来有点凌乱，缺少什么东西一样。

![在这里插入图片描述][c91163c636e841deaba9a8f5ca4733be.png]

## 生成序号 ##

在Element-UI官网中的table的众多demo下，有这么一个demo：

![在这里插入图片描述][41a417006f4e40e49df940a3e19960f2.png]

我们可以利用里面的代码，生成序号，demo里面的代码比较长，我把核心代码抽取出来了，如下：

<el-table-column
          type="index"
          :index="indexMethod">
        </el-table-column>
    
    
    	methods: {
        
          indexMethod(index) {
        
            return index * 2;
          }
        }

## 使用序号 ##

把上面的核心代码放到组件里面，一个最简单的序号就出现了：

> 这里我为了展示这两块核心的代码，删除了我的表格属性省略了部分代码

![在这里插入图片描述][361db01320a54ce2ad6321743bdea5ad.png]

## 自定义序号 ##

这里简单解释下，index是从0开始的，因为返回的是index\*2，所以相当于每次0+=2这样递增，我们可以抓住这个特性，改变自增规则，实现自己想要的序号类型。

比如我现在想要从1开始，每次自增1，就可以这样：

> 这里我感觉表头不美观，就新增了一些属性，比如宽度，文本居中，表头描述等

![在这里插入图片描述][a052b4a8abb54bee9c2c0f1e9b489695.png]

这样一个自己想要的表头序号就诞生了！

![在这里插入图片描述][cea3a7188f624f7db0cf2f0631393b17.png]

核心代码：

<el-table-column
          type="index"
          width="90"
          align="center"
          :index="indexMethod"
          label="序号">
        </el-table-column>
    
    
     // 生成表头序号
        indexMethod(index) {
        
          return index ;
        },

当然，你可以根据自己想要的规则进行随意定义，满足自己的需求即可。

## 注意 ##

index是用0开始的，如果不自增1就会是这样的：

![在这里插入图片描述][d77d1d5aee59440fabe23b53f8806a90.png]

序号一般都是从0开始的，这样会显得很怪。

![在这里插入图片描述][4bf637823f8c4f8581b8aa6bb6dcaf36.png]

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

![在这里插入图片描述][8d3ae23bae884c139fc72b5dc29e6251.png]

[c91163c636e841deaba9a8f5ca4733be.png]: https://img-blog.csdnimg.cn/c91163c636e841deaba9a8f5ca4733be.png
[41a417006f4e40e49df940a3e19960f2.png]: https://img-blog.csdnimg.cn/41a417006f4e40e49df940a3e19960f2.png
[361db01320a54ce2ad6321743bdea5ad.png]: https://img-blog.csdnimg.cn/361db01320a54ce2ad6321743bdea5ad.png
[a052b4a8abb54bee9c2c0f1e9b489695.png]: https://img-blog.csdnimg.cn/a052b4a8abb54bee9c2c0f1e9b489695.png
[cea3a7188f624f7db0cf2f0631393b17.png]: https://img-blog.csdnimg.cn/cea3a7188f624f7db0cf2f0631393b17.png
[d77d1d5aee59440fabe23b53f8806a90.png]: https://img-blog.csdnimg.cn/d77d1d5aee59440fabe23b53f8806a90.png
[4bf637823f8c4f8581b8aa6bb6dcaf36.png]: https://img-blog.csdnimg.cn/4bf637823f8c4f8581b8aa6bb6dcaf36.png
[8d3ae23bae884c139fc72b5dc29e6251.png]: https://img-blog.csdnimg.cn/8d3ae23bae884c139fc72b5dc29e6251.png