当前位置: 首页 > news >正文

el-table 实现纵向多级表头

为了实现上图效果,最开始打算用el-row、el-col去实现,但发现把表头和数据分成两大列时,数据太多时会导致所在格高度变高。但由于每一格数据肯定不一样,为保持高度样式一致,就需要我们手动去获取最高格的高度之后再设置给其他格,很麻烦..

改写el-table相对来说更简单。关键点:

1、设置:show-header="false"隐藏原本的表头;

2、将纵向表头当成数据,放在table的最前列;

3、如果有多级表头,就得通过设置:span-method="objectSpanMethod"去合并行或列;

4、处理后端返回的数据格式。

一、el-table大致框架:

<template><el-table :show-header="false" :span-method="objectSpanMethod" ref="readinessRef" class="tableBox" v-loading="loading" :data="getIValues" fit border style="width: 100%" :cell-style="{'background-color': '#fafafa', 'color': 'rgba(51, 66, 97, 0.6)', 'font-weight': '300'}"><el-table-column v-for="(item, index) in getIHeaders" :key="index" :prop="item" align="center" :width="[0,1].indexOf(index)!=-1 ? '150px':'300px'" :min-width="[0,1].indexOf(index)==-1 ? '300px':''"><template #default="scope"><div v-if="[0,1].indexOf(index)==-1 && scope.row.title == '能力图解'" class="perpareBox"><ul style="text-align: left;"><li v-for="(liItem,liIndex) in getResList(scope.row[item][scope.row.moldTitle])" :key="liIndex">{{liItem}}</li></ul></div><div v-if="index!=0 && scope.row.title == '人力资源准备度'" class="perpareBox"><div class="num">{{scope.row[item]}}</div><div v-if="parseFloat(scope.row[item])<0.5" class="circleRed"></div><div v-else-if="parseFloat(scope.row[item])>=0.8" class="circleGreen"></div><div v-else class="circleYellow"></div></div></template></el-table-column></el-table>
</template>

二、所需数据格式:

1、表头:

const iHeaders = ref([{prop: 'groupName',label: '工作群组'},{prop: 'duty',label: '能力图解'},{prop: 'xuqNum',label: '需求数量'},{prop: 'passNum',label: '合格数'},{prop: 'perpare',label: '人力资源准备度'}
])const getIHeaders = computed(() => {return readinessList.value.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title', 'moldTitle'])
})

多级表头数据:

const moldData = ref([{"id": 2,"name": "知识技能"},{"id": 3,"name": "硬性条件"},{"id": 4,"name": "能力素质"},{"id": 104,"name": "组织贡献"}])

处理表头合并行:

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {let moldDataIndex = moldData.value.length// console.log('moldDataIndex', moldDataIndex)if (rowIndex < 1 || rowIndex > moldDataIndex) {if (columnIndex === 0) {return [1, 2] // 一、二列表头合并} else if (columnIndex === 1) {return [0, 0]}}if (columnIndex === 0) {if (rowIndex == 1) {return {rowspan: moldDataIndex, //二、三、四、五行表头合并colspan: 1}} else {return {rowspan: 0,colspan: 0}}}
}

2、处理后端返回数据:

后端返回格式:

const readinessList = ref([{"groupName": "测试222","xuqNum": 200,"passNum": 0,"perpare": "0.0%","duty": {"硬性条件": [],"知识技能": [{"name": "知识技能","responsibility": "法规政策"},{"name": "知识技能","responsibility": "日常办公软件操作"},{"name": "知识技能","responsibility": "客户关系与维护"}],"组织贡献": [],"能力素质": [{"name": "能力素质","responsibility": "办公软件1"},{"name": "能力素质","responsibility": "特别能吃苦"}]}}
])

处理数据的函数:

const getIValues = computed(() => {return handleData(readinessList.value)
})function handleData(data) {let list = []if (data.length != 0) {iHeaders.value.forEach(headers => {let obj = {}if (headers.label == '能力图解') {moldData.value.forEach(mold => { // 处理多级表头obj = data.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[headers.prop] }), { title: headers.label, moldTitle: mold.name })list.push(obj)})} else {obj = data.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[headers.prop] }), { title: headers.label })list.push(obj)}})return list} else {return []}
}

处理后的数据格式:

 

 

相关文章:

el-table 实现纵向多级表头

为了实现上图效果&#xff0c;最开始打算用el-row、el-col去实现&#xff0c;但发现把表头和数据分成两大列时&#xff0c;数据太多时会导致所在格高度变高。但由于每一格数据肯定不一样&#xff0c;为保持高度样式一致&#xff0c;就需要我们手动去获取最高格的高度之后再设置…...

Android Studio 下载安装教程(2024 更新版),附详细图文

今天&#xff0c;为大家带来的是Android Studio 2024更新版的下载安装教程&#xff0c;包含详细图文步骤。 随着 Android Studio 的不断更新&#xff0c;自从引入 Koala 系列后&#xff0c;其版本号的命名规则也发生了变化。以本次更新为例&#xff0c;版本号为 2024.2.1&#…...

安全框架:Apache Shiro

安全框架&#xff1a;Apache Shiro 前言您的第一个 Apache Shiro 应用程序Multiple Parts&#xff08;多个部分&#xff09;INI配置[main]部分[users]部分[roles]部分[urls]部分默认过滤器常规启用/禁用 密码学会话管理Remember Me 整合SpringBoot登录登录超时记住我注解登录后…...

泊松融合调研

目录 裁剪加速,速度提升2倍多 cuda版: 效果没测,官方效果不错: 效果不好,parosky/poissonblending 裁剪加速,速度提升2倍多 import os import sys import os os.chdir(os.path.dirname(os.path.abspath(__file__))) current_dir = os.path.dirname(os.path.abspath(__…...

uniapp——App下载文件,打开文档(一)

uniapp如何下载文件、打开文件 文章目录 uniapp如何下载文件、打开文件下载文件下载文件成功返回数据格式 打开文档处理 iOS 打开文件可能失败问题 相关API&#xff1a; uni.downloadFileuni.openDocument 注意&#xff1a; 只支持 GET 请求&#xff0c;需要 POST的&#xff…...

Python 列表的高级索引技巧

列表是 Python 中最常用的数据结构之一&#xff0c;它允许你存储多个元素&#xff0c;并且可以通过索引来访问这些元素。本文将带你深入了解 Python 列表的高级索引技巧&#xff0c;让你在处理数据时更加得心应手。 1.基本索引 首先&#xff0c;我们来看看如何使用基本索引来访…...

UE5.3 虚幻引擎 Windows插件开发打包(带源码插件打包、无源码插件打包)

0 引言 随着项目体量的增大&#xff0c;所有代码功能都放一起很难管理。所以有什么办法可以将大模块划分成一个个小模块吗。当然有&#xff0c;因为虚幻引擎本身就遇到过这个问题&#xff0c;他的解决办法就是使用插件的形式开发。 例如&#xff0c;一个团队开发了文件I/O模块插…...

RC充电电路仿真与分析

RC充电原理 下图是一个常见的RC充电电路&#xff1a;&#xff08;假设R10K&#xff0c;C100nF&#xff09; SW断开时&#xff0c;这个电路处于断路状态&#xff0c;C既没有充电也没有放电&#xff1b;SW闭合时&#xff0c;直流电源5V为电容C充电&#xff1b; 充电时电容两端…...

C++ 设计模式:观察者模式(Observer Pattern)

链接&#xff1a;C 设计模式 链接&#xff1a;C 设计模式 - 模板方法 链接&#xff1a;C 设计模式 - 策略模式 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主…...

栈及栈的操作

栈及栈的操作 栈结构 栈是一种只能在一端进行插入或删除操作的数据结构。栈有两个基本的操作:入栈和出栈。 入栈:将一个新的元素放到栈顶。 出栈:从栈顶取出一个元素。栈顶的元素总是最后入栈&#xff0c;需要出栈时&#xff0c;又最先被从栈中取出。栈的操作规则:LIFO(Last…...

算法:切饼

对以下题目设计一个算法&#xff1a;切饼 假设&#xff1a;有一张很大很大的饼&#xff0c;给你一把足够长的刀。要求&#xff1a;每次在饼上切一刀。 问题&#xff1a;n刀&#xff0c;最多能切出多少块饼&#xff1f; n3 要解决这个问题&#xff0c;我们可以从数学归纳法的…...

C++ 设计模式:代理模式(Proxy Pattern)

链接&#xff1a;C 设计模式 链接&#xff1a;C 设计模式 - 门面模式 链接&#xff1a;C 设计模式 - 中介者 链接&#xff1a;C 设计模式 - 适配器 代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它为其他对象提供一种代理以控制&#xff08…...

JDK、JRE、JVM的区别

JDK&#xff08;Java Development Kit&#xff09;、JRE&#xff08;Java Runtime Environment&#xff09;和 JVM&#xff08;Java Virtual Machine&#xff09;是 Java 开发和运行环境的三个重要组成部分。 JDK 是 Java 开发工具包&#xff0c;它包含了编译器&#xff08;ja…...

2021年福建公务员考试申论试题(县级卷)

2021年福建公务员考试申论试题&#xff08;县级卷&#xff09; 材料一 “把她的家粉刷一新。给独自生活的她更多支持。”   某公益平台上&#xff0c;为女孩小珊修缮房屋的公益计划得到不少爱心网友的支持。1元、10元、100元……不到一个月&#xff0c;爱心捐赠就超过了修缮…...

问题记录:[FATAL] [1735822984.951119148]: Group ‘manipulator‘ was not found.

前言&#xff1a;最近仿照UR5手眼标定的例程&#xff0c;在新的机械臂上进行手眼标定&#xff0c;还准备用easy_hand手眼标定包。将机器人功能包导入到工作空间后进行编译运行&#xff0c;启动launch文件&#xff1a; roslaunch easy_handeye eye_to_hand_CR7_calibration.lau…...

【大模型实战篇】Mac本地部署RAGFlow的踩坑史

1. 题外话 最近一篇文章还是在11月30日写的&#xff0c;好长时间没有打卡了。最近工作上的事情特别多&#xff0c;主要聚焦在大模型的预训练、微调和RAG两个方面。主要用到的框架是Megatron-DeepSpeed&#xff0c;后续会带来一些分享。今天的文章主要聚焦在RAG。 近期调研了一系…...

iOS 修改图片颜色

需求中会遇到这种情况&#xff0c;就是我们需要的图片是已经有的 但是图片的颜色不符合我们的需求&#xff0c;但是又不想再切新的图片了&#xff0c;这个时候&#xff0c;我们可以使用代码的方式修改图片的颜色&#xff0c;达到同样的效果 关键代码就是 [image imageWithRend…...

OceanBase到MySQL实时同步方案

概述 本方案基于OceanBase Binlog服务&#xff0c;采用数据库实时复制软件Beedup订阅捕获OceanBase数据库的Binlog事件&#xff0c;复制软件将Binlog事件还原为MySQL支持的DML或DDL&#xff0c;然后交由MySQL数据库执行。 配置Binlog任务 启用OceanBase Binlog服务&#xff…...

信息系统项目管理师——第8章章 项目整合管理 笔记

8 项目整合管理&#xff08;最后反过来看&#xff09; 项目整合过程&#xff1a;①制定项目章程&#xff08;启动过程&#xff09;、②制订项目管理计划&#xff08;规划过程&#xff09;、③指导和管理项目工作、管理项目知识&#xff08;执行过程&#xff09;、④监控项目工…...

最好用的图文识别OCR -- PaddleOCR(1) 快速集成

最近在项目中遇到了 OCR 的需求&#xff0c;希望能够实现高效而准确的文字识别。由于预算限制&#xff0c;我并未选择商业付费方案&#xff0c;而是优先尝试了开源工具。一开始&#xff0c;我测试了 GOT-OCR2.0&#xff0c;但由于我的 Mac 配置较低&#xff0c;不支持 GPU 运算…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...