Vue使用Element-UI生成并展示表头序号
2023-09-11 14:22:31 时间
前言
序号算是在展示数据的时候,一种很普遍的属性了,我们可以自己写生成序号的规则,也可以借助第三方。
这里我选择后者,使用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笔记:vue-router
- vue组件之间的通信
- vue项目中抽离.vue文件中的js代码
- vue全局组件和局部组件
- Easy Mock以及Vue+Mock.js模拟数据
- [Vue @Component] Write Vue Functional Components Inline
- [Vue @Component] Simplify Vue Components with vue-class-component
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- [Vue @Component] Switch Between Vue Components with Dynamic Components
- vue.js3: json格式化(vue@3.2.37 / vue-json-pretty@2.1.1)
- vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
- vue事件修饰符:v-once只执行一次
- Vue入门教程:node安装vue命令行工具及启动项目
- SAP Fiori和Vue的结合会给企业级应用软件的UI开发带来什么?
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- uniapp微信小程序vue项目uView UI手写分页实现简单翻页跳页功能
- Vue:插槽属性prop的使用示例
- Vue+Element UI
- 189:vue+openlayers 上传CSV文件,导出Geojson格式文件
- 127:vue+openlayers 使用CRTL控制map拖拽和鼠标滚动 (示例代码)
- vue+element ui+腾讯云开发打造会员管理系统之实战教程(八)订单管理
- vue+element ui+腾讯云开发打造会员管理系统之实战教程(四)用户管理
- npm ERR! Could not resolve dependency:npm ERR! peer vue@“^2.5.17“ from element-ui@2.15.12
- Vue.js - webpack相关配置
- 测试开发之Vue学习笔记-Vue路由