el-table 纵向垂直表头处理

ops/2024/11/14 6:26:22/

项目中表格展示会遇到需要纵向垂直表头情况,下面,我们基于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.ppmy.cn/ops/133055.html

相关文章

在心理学研究中实施移动眼动追踪:实用指南

摘要 眼动追踪提供了直接的、时间和空间敏感的眼球注视测量。它能够捕捉从婴儿期到成年期的视觉注意模式。然而&#xff0c;常用的基于屏幕的眼动追踪(SET)方法在描绘个体如何在“现实生活”中与环境互动时的信息处理上存在局限性。移动眼动追踪(MET)记录参与者在主动行为背景…

kafka的安装与使用

目录 一、 简介 1.1、概念 1.2、核心成员 1.3、特点 二、安装 2.1、zookeeper 2.2、上传解压重命名 2.3、修改配置文件 2.4、启动 2.5、一个启停脚本 三、使用 3.1、主题命令行操作 3.1.1查看操作主题命令参数 3.1.2创建 first topic 3.1.3查看当前服务器中的所有…

【MySQL】MySQL基础知识复习(下)

前言 上一篇博客介绍了MySQL的库操作&#xff0c;表操作以及CRUD。 【MySQL】MySQL基础知识复习&#xff08;上&#xff09;-CSDN博客 本篇将进一步介绍CRUD操作&#xff0c;尤其是查找操作 目录 一.数据库约束 1.约束类型 1.1NULL约束 1.2UNIQUE&#xff1a;唯一约束 …

lua入门教程:math

在Lua中&#xff0c;math库是一个非常重要的内置库&#xff0c;它提供了许多用于数学计算的函数。这些函数可以处理各种数学运算&#xff0c;包括基本的算术运算、三角函数、对数函数、随机数生成等。结合你之前提到的Lua中的数字遵循IEEE 754双精度浮点标准&#xff0c;我们可…

【Visual Studio系列教程】什么是 Visual Studio?

欢迎阅读本文&#xff01;这意味着你可能已经准备好开始学习如何使用 Visual Studio 进行开发。既然如此&#xff0c;我们就不多做废话&#xff0c;直接进入本系列的第1篇文章&#xff1a;《什么是 Visual Studio&#xff1f;》。 Visual Studio 是一款功能强大的开发人员工具…

Linux——简单认识vim、gcc以及make/Makefile

前言&#xff1a;大佬写博客给别人看&#xff0c;菜鸟写博客给自己看&#xff0c;我是菜鸟。 1、vim操作&#xff1a; 默认打开vim时&#xff0c;vim处于命令模式。(在其他模式中&#xff0c;Esc就能够返回命令模式) 常用的命令有&#xff1a; n gg&#xff1a;跳转到n行&…

Mysql COUNT() 函数详解

Mysql COUNT 函数详解 COUNT() 的几种用法COUNT(*)COUNT(1)COUNT(column)COUNT(*) 与 GROUP BYCOUNT(*) 与 GROUP BY 和 HAVING COUNT(expr) 的用法COUNT(DISTINCT expr)COUNT(expr) 带条件查询 写在最后 在使用Mysql的时候&#xff0c;作为开发者&#xff0c;聚合函数是肯定会…

第三十六章 Vue之路由重定向/404页面设置/路径模式设置

目录 一、路由重定向 1.1. 使用方式 1.2. 完整代码 1.2.1. main.js 1.2.2. App.vue 1.2.3. index.js 1.2.4. Search.vue 1.2.5. Home.vue 1.3. 运行效果 二、设定404错误页面 2.1. 使用方式 2.2. 完整代码 2.2.1. index.js 2.2.2. NotFound.vue 2.2.3. 运行效…