el-table 纵向垂直表头处理

news2024/11/23 9:44:53

项目中表格展示会遇到需要纵向垂直表头情况,下面,我们基于el-table组件来实现这种表格。

以下是这次需要用到的数据表格,已知左侧违章名称是固定的,而月份是不固定的,在后端返回数据格式已确定的情况下,需要将左侧作为表头展示。

第一步


先将 el-table 进行编辑,el-table 中的 data 属性数据我们需要进行重新处理,将原来的数据进行纵横转换,这一步理解起来会比较复杂。放到 js 中去讲解
<el-table v-else ref="tableRef" :data="getIValues" :show-header="false" border>

    <el-table-column v-for="(item, index) in getIHeaders" :key="index" :prop="item" align="center"> </el-table-column>

</el-table>

第二步


数据配置 数据我们需要单独配一次 headers,将原来的表头改成数据动态生成的方式。这个表头的配置需要按照实际数据的 键 与 名称 进行对应。最终渲染时由 第三步 的 getHeaders 来提供数据。具体 getHeaders 要做什么,我们第三步来讲解
const iHeaders = ref([

  {

    prop: 'month',

    label: '违章名称'

  },

  {

    prop: 'tiredNumber',

    label: '疲劳驾驶'

  },

  {

    prop: 'overspeedNumberMax',

    label: '超速(>10%)'

  },

  {

    prop: 'overspeedNumberMin',

    label: '超速(≤10%)'

  },

  {

    prop: 'trafficViolationsNumber',

    label: '交通违章'

  },

  {

    prop: 'otherNumber',

    label: '其他'

  }

])

第三步


getHeaders 与 getValues

这两个函数我们做计算属性直接使用即可
const getIHeaders = computed(() => {

  return illegalData.value.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])

})

const getIValues = computed(() => {

  return iHeaders.value.map(item => {

    return illegalData.value.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { title: item.label })

  })

})

getHeaders:

先看打印结果:[ "title", "value0", "value1", "value2" ]

可能你不明白为什么要这么做,想象一下,原来的纵表改为横表以后,我们的第一列就是 title 第二列开始往后都将是 value 但是我们并不知道有多少个 value,所以我们需要通过这种方式来动态的去生成表头,不能使用原来的表头了

既然表头通过[ "title", "value0", "value1", "value2" ]这个表头定死了,也就意味着我们的数据结果,也必须以这种名字来命名。同时也需要想到 数组中的每个属性就对应的是一列

getValues:

先看打印结果[{
    "title": "违章名称",
    "value0": "2024年08月",
    "value1": "2024年09月",
    "value2": "2024年10月"
}]

通过我们的纵横转换以后,我们的数据结果将会变为 数组中的每一个对象都将是一行,每一个属性都将是一列。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2238560.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android OpenGL ES详解——纹理:纹理过滤GL_NEAREST和GL_LINEAR的区别

目录 一、概念 1、纹理过滤 2、邻近过滤 3、线性过滤 二、邻近过滤和线性过滤的区别 三、源码下载 一、概念 1、纹理过滤 当纹理被应用到三维物体上时&#xff0c;随着物体表面的形状和相机视角的变化&#xff0c;会导致纹理在渲染过程中出现一些问题&#xff0c;如锯齿…

超市11-12月生鲜重点商品配置

11月份&#xff1a;应季商品很多,特别是与季节相对应的蔬菜大量上市。宜推荐对预防感冒等相应的特殊食谱,推荐对于常外出的人方便又省事、省时的食谱&#xff0c;推荐多种花样的火锅&#xff0c;推荐便于保存的应季食品原料。 生活特性&#xff1a;大众食谱宜以炖菜、红焖、火锅…

c++设计模式demo

模式设计原则 依赖倒置原则 ⾼层模块不应该依赖低层模块&#xff0c;⼆者都应该依赖抽象 &#xff1b; 抽象不应该依赖具体实现&#xff0c;具体实现应该依赖于抽象&#xff1b; ⾃动驾驶系统公司是⾼层&#xff0c;汽⻋⽣产⼚商为低层&#xff0c;它们不应该互相依赖&#x…

【网络面试篇】其他面试题——Cookie、Session、DNS、CDN、SSL/TLS、加密概念

目录 一、HTTP 相关问题 1. Cookie 和 Session 是什么&#xff1f; &#xff08;1&#xff09;Cookie &#xff08;2&#xff09;Session 2. Cookie 的工作原理&#xff1f; 3. Session 的工作原理&#xff1f; 4. Cookie 和 Session 有什么区别&#xff1f; 二、其他问…

软件测试第二篇软件测试技术

第五章单元测试和集成测试的技术 单元静态测试主要由开发人员完成。 标准&#xff1a;规定什么能做&#xff0c;什么不能做。 规范&#xff1a;建议你要怎么做。 5.1.2 代码评审 代码评审是一种发现代码缺陷的另一种测试方法。 代码审查的最佳实践&#xff1a; 创建代码审…

QT中 update()函数无法实时调用 paintEvent

QT中 update()函数无法实时调用 paintEvent&#xff01; 在QT中&#xff0c;update()函数用于标记一个窗口区域为“需要重绘”。当调用update()后&#xff0c;QT会在合适的时候调用paintEvent()来重绘这个区域。然而&#xff0c;update()不会立即调用paintEvent()&#xff0c;…

SDL事件相关

文章目录 事件相关的函数和数据结构用户自定义事件代码相关&#xff1a; 事件相关的函数和数据结构 SDL_WaitEvent :等待一个事件SDL_PushEvent 发送一个事件SDL_PumpEvents(): 将硬件设备产生的时间放入事件队列 &#xff0c;用于读取事件&#xff0c;在调用该函数之前&#…

优化时钟网络之时钟抖动

Note&#xff1a;文章内容以Xilinx 7系列FPGA进行讲解 1、什么是时钟抖动 时钟抖动就是时钟周期之间出现的偏差。比如一个时钟周期为10ns的时钟&#xff0c;理想情况下&#xff0c;其上升沿会出现在0ns&#xff0c;10ns&#xff0c;20ns时刻&#xff0c;假设某个上升沿出现的时…

达梦8-达梦数据实时同步软件(DMHS)配置-Oracle-DM8

1、安装环境 源端目的端IP地址192.168.6.111192.168.6.110系统版本Red Hat 6.4Kylin v10数据库版本Oracle11g达梦 v8系统用户Oracledmdba字符集MERICAN_AMERICA.AL32UTF8UTF-8端口15215236实例名PRODDMSERVER数据库软件目录/u01/app/oracle/opt/dmdbmsDMHS安装目录/u01/dmhs/o…

AI基础知识

目录 1.激活函数:one: 激活函数的作用:two: sigmoid函数:three: tanh函数:four: ReLu:five: Leaky ReLU 2.Softmax函数3.优化器:one: 优化器的作用:two: BGD&#xff08;批梯度下降&#xff09;:three: SGD&#xff08;随机梯度下降&#xff09;:four: MBGD&#xff08;Mini Ba…

【论文阅读】Learning dynamic alignment via meta-filter for few-shot learning

通过元滤波器学习动态对齐以实现小样本学习 引用&#xff1a;Xu C, Fu Y, Liu C, et al. Learning dynamic alignment via meta-filter for few-shot learning[C]//Proceedings of the IEEE/CVF conference on computer vision and pattern recognition. 2021: 5182-5191. 论文…

ArcGIS Pro SDK Addin-DAML

ArcGIS Pro SDK Addin-DAML 文章目录 ArcGIS Pro SDK Addin-DAML1 Panes: 重置窗格2 Button: 从功能区中移除核心按钮3 Button: 将新按钮插入功能区上的现有组4 Menu: 在图层上下文菜单中插入一个新按钮5 Menu: 在 Map Container 上下文菜单中插入新菜单6 Menu: 在2D Map上下文…

FPGA学习笔记#7 Vitis HLS 数组优化和函数优化

本笔记使用的Vitis HLS版本为2022.2&#xff0c;在windows11下运行&#xff0c;仿真part为xcku15p_CIV-ffva1156-2LV-e&#xff0c;主要根据教程&#xff1a;跟Xilinx SAE 学HLS系列视频讲座-高亚军进行学习 学习笔记&#xff1a;《FPGA学习笔记》索引 FPGA学习笔记#1 HLS简介及…

熊猫追剧 1.0.2 | 免费影视播放,独家蓝光线路

熊猫追剧是一款免费的视频播放软件&#xff0c;集合了网络上的电影、电视剧、综艺、动漫以及短剧等多种类型的视频资源。经过测试&#xff0c;该软件内没有广告干扰&#xff0c;采用独家蓝光线路&#xff0c;提供高清流畅的观影体验。用户还可以享受视频投屏、下载和倍速播放等…

[CKS] K8S AppArmor Set Up

最近准备花一周的时间准备CKS考试&#xff0c;在准备考试中发现有一个题目关于AppArmor Pod操作权限的问题。 ​ 专栏其他文章: [CKS] Create/Read/Mount a Secret in K8S-CSDN博客[CKS] Audit Log Policy-CSDN博客 -[CKS] 利用falco进行容器日志捕捉和安全监控-CSDN博客[CKS] …

Tomcat漏洞利用工具-TomcatScanPro(二)

项目地址 https://github.com/lizhianyuguangming/TomcatScanPro 简介 本项目是一个针对 Tomcat 服务的弱口令检测、漏洞检测以及本地文件包含&#xff08;LFI&#xff09;攻击工具。除了支持 CVE-2017-12615 漏洞的多种利用方式外&#xff0c;新版本还集成了 CNVD-2020-104…

【XML协议】轻松掌握使用C++ XML解析库——pugixml

文章介绍了xml协议的组成以及C xml解析库pugixml的常用操作。源于开发中每次遇到xml操作时&#xff0c;都要回过头查看pugixml库常用操作时什么样的&#xff0c;能不能有个更深刻和清晰的认识呢&#xff1f;其实搞清楚xml结构和pugixml组织结构的对照关系&#xff0c;以及pugix…

《无线重构世界》射频模组演进

射频前端四大金刚 射频前端由PA、LNA、滤波器、开关“四大金刚” 不同的模块有自己的工艺和性能特点 分层设计 射频前端虽然只由PA、LNA、开关、混频器4个模块构成&#xff0c;但不同模块之间相互连接且相互影响。如果将射频系统当成一个整体来理解&#xff0c;其中的细节和…

《Python编程实训快速上手》第五天--模式匹配与正则表达式

一、不用正则表达式查找文本模式 文本模式是一种人为规定的结构&#xff0c;现在有一个模式&#xff1a;3个数字-3个数字-4个数字 使用isPhoneNumber()函数来判断字符串是否匹配该模式 def isPhoneNumber(number):if len(number) ! 12:return Falsefor i in range(0,3):if n…

文件读写函数(1)

大家好&#xff0c;今天我们来介绍一下文件读写函数&#xff0c;昨天我们已经简单提及了一下文件的概念&#xff0c;那么我们今天就不多说&#xff0c;下面我们来看函数。 1.fopen函数 这个函数是用来打开文件的&#xff0c;它的两个参数分别是文件名和文件的打开模式&#x…