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展示表头序号内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Avue和Element-UI动态三级表头的实现

    Avue和Element-UI动态三级表头的实现

    目录 Avue配置方式 Element-UI三级表头动态写法 需求场景: 业务方希望有表格可以体现员工的考勤信息,要具体到上午下午,统计司机上下班打卡所产生的数据.产品提出想做成三级表头根据页面查询条件的年月去动态生成表格的表头.三级分别是月份日期,对应的星期,以及每天的上午以及下午. 效果如下: Avue配置方式 通过对avue-crud组件的option的配置如下: { label: `${$this.month}月${$this.dateList[0].ri}日`, // 月份 heade

  • vue element-ui里的table中表头与表格出现错位的解决

    vue element-ui里的table中表头与表格出现错位的解决

    目录 element-ui里的table中表头与表格出现错位 解决方案 element-ui表格样式错乱调整方式 1.线没有对齐 2.fixed固定导致的高度问题 3.去掉鼠标hover修改背景色事件 element-ui里的table中表头与表格出现错位 现象: 原因:电脑显示的缩放引起的,并且发现同为webkit内核的Google浏览器和360浏览器中360浏览器显示正常,而Google浏览器才会出现这个问题. 解决方案 找到项目入口文件(敲黑板重点!!),添加全局样式: .el-table

  • vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

    父组件 定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents }, 获取表头和表内容数据.(真实数据应该是从接口获取的,由于是测试数据这里我先写死)

  • vue+element-ui动态生成多级表头的方法

    vue+element html配置: <div id="table">{{tableData}} <el-table :data="tabledata01" :span-method="tableSpanMethod" max-height="420"> <el-table-column v-for='item in tableConfig' :label="item.label&qu

  • Vue使用Element-UI生成并展示表头序号的方法

    目录 前言 生成序号 使用序号 自定义序号 注意 前言 序号算是在展示数据的时候,一种很普遍的属性了,我们可以自己写生成序号的规则,也可以借助第三方. 这里我选择后者,使用Element-UI自带的一个table属性,去生成并展示需要 首先看下我的页面,是没有序号的,这样看起来有点凌乱,缺少什么东西一样. 生成序号 在Element-UI官网中的table的众多demo下,有这么一个demo: 我们可以利用里面的代码,生成序号,demo里面的代码比较长,我把核心代码抽取出来了,如下: <el-t

  • vue+axios+element ui 实现全局loading加载示例

    实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; import { Message, Loading } from 'element-ui'; import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function st

  • vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案

    目录 项目需求: 解决方案探索 错误代码: 问题就出在 解决方法 完整代码 如下 项目需求: 输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口 根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题.于是开始了测试之路. 解决方案探索 1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口. [x]2.考虑到可能是

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • vue将html页面生成高清晰pdf文件的方法

    vue将html页面生成高清晰pdf文件的方法

    目录 效果图如下 流文件转成file 总结 需要借助html2canvas和jspdf这两个插件 首先是将页面用html2canvas生成base64的图片,再用jspdf将图片插入到pdf 效果图如下 createImage(){//生成图片->pdf let _this = this; //----此处是解决页面带滚动条的时候截图不全问题 window.pageYoffset = 0; document.documentElement.scrollTop = 0; document.body

  • Vue前端整合Element Ui的教程详解

    Vue前端整合Element Ui的教程详解

    目录 Vue前端整合Element Ui 1.安装Element Ui组件库 2.测试Element Ui是否整合成功 Vue前端整合Element Ui 本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型. Element Ui组件官网 1.安装Element Ui组件库 WIN+

  • vue项目如何引入element ui、iview和echarts

    vue项目如何引入element ui、iview和echarts

    目录 vue引入element ui.iview和echarts 1.vue项目引入elementui 2.vue项目中引入iview 3.vue项目中引入echarts 4.main.js文件代码截图 5.echarts在引入后 6.引入之后就可以使用他们的组件了 iview与elementui对比 表格 风格 按需引入 表单验证 下拉选择器 vue引入element ui.iview和echarts 记性不好,每次引入都要重新搜一遍,今天把几个自己整理一下.全部引入,没搞按需引入. 1.vu

  • 解决Vue的项目使用Element ui 走马灯无法实现的问题

    1.在vue项目中引入element ui http://element.eleme.io/#/zh-CN/component/carousel 引入后,HTML部分 <el-carousel height="150px"> <el-carousel-item v-for="item in imgList" :key="item" height="300px" > <h3><img :

  • 在Vue中使用deep深度选择器修改element UI组件的样式

    在项目当中我们常常会使用到 Element UI 组件库来进行快速开发,但是组件在引入之后它都会有官方默认的样式,有些情况我们需要修改它的样式. 方法一(不推荐):使用class 为要修改的这个组件标签设置一个 class 类名,然后在 <style></style> 标签中设置样式.但要注意这种方式必须是在全局下才会生效,也就是说 <style></style> 标签中不能用 scoped 属性. <style> </style>

  • Vue+Element ui 根据后台返回数据设置动态表头操作

    由于后端是多人开发,也没有规范数据格式,所有页面是我一个人开发,所以就会遇到同样的页面不同的返回数据格式问题. 一.根据element文档,利用prop属性绑定对应值,label绑定表头. html <el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%"> <template v-for="

随机推荐