手写table表格(一表头多数据)

手写table表格(一表头多数据)

<template><div class="table-info"><div class="info-list"><div class="header-wrapper"><div class="columns-title" v-for="(i, k) in columns" :key="k" :style="'width:' + i.width + 'px'"><div :class="[i.child ? 'active' : '']" v-html="i.name"></div><!-- <div v-if="i.child" class="line"></div> --><div v-if="i.child" class="column-warpper"><div class="column-subtitle" v-for="(child, cindex) in i.child" :key="cindex":style="'width:' + child.width + 'px'" v-html="child.name"></div></div></div></div><div class="content-data" v-for="(item, index) in dataList" :key="index"><div class="columns-text" v-for="(data, dindex) in item.data" :key="dindex":style="'width:' + dataWidth[dindex] + 'px'" v-html="data"></div></div></div></div>
</template><script>
export default {name: 'table-info',props: {columns: {type: Array,default: []},dataWidth: {type: Array,default() {return []}},dataList: {type: Array,default() {return []}}},data() {return {}}
}
</script><style scoped>
.table-info {width: 100%;/* width: 1600px; */
}.info-list {display: inline-block;margin-bottom: 20px;
}.header-wrapper {height: 70px;line-height: 70px;background: #4b82e9;font-size: 16px;color: #ffffff;/* margin-bottom: 10px; */text-align: left;border: 1px solid black;border-right: none;
}.header-wrapper>.columns-title {text-align: center;/* margin-right: 4px; */display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: relative;height: 70px;border-right: 1px solid black;}.header-wrapper>.columns-title>.active {line-height: 36px;border-bottom: 1px solid black;
}.line {height: 1px;background-color: rgba(0, 0, 0, 0.3);
}.column-warpper {position: absolute;bottom: 0;line-height: 20px;
}.column-subtitle {text-align: center;/* margin-right: 4px; */display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 31px;border-right: 1px solid black;padding-top: 10px;position: relative;bottom: -3px;}/* 数值 */
.content-data {width: 100%;height: 27px;line-height: 27px;border: 1px solid black;border-top: none;border-right: none;
}.content-data>.columns-text {height: 100%;border-right: 1px solid black;text-align: center;display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>

数据格式

columns: [{ name: "浓度(μg/mL)", width: "180" },{name: "盐度S",width: "840",child: [{ name: '0', width: '120' },{ name: '3.5', width: '120' },{ name: '7', width: '120' },{ name: '14', width: '120' },{ name: '21', width: '120' },{ name: '28', width: '120' },{ name: '35', width: '120' },]},{ name: "最大相对偏差/%", width: "200" },],dataWidth: ['180', '120', '120', '120', '120', '120', '120', '120', '200'],dataList: [{data: ['0.4', '0.397', '0.417', '0.394', '0.397', '0.41', '0.387', '0.401', '4.2']},{data: ['2.2', '2.24', '2.21', '2.23', '2.25', '2.16', '2.16', '2.13', '3.2']}]

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

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

相关文章

【wu-lazy-cloud-network】Java自动化内网穿透架构整理

项目介绍 wu-lazy-cloud-network 是一款基于&#xff08;wu-framework-parent&#xff09;孵化出的项目&#xff0c;内部使用Lazy ORM操作数据库&#xff0c;主要功能是网络穿透&#xff0c;对于没有公网IP的服务进行公网IP映射 使用环境JDK17 Spring Boot 3.0.2 版本更新 1…

Go的异常处理

在Go中不支持传统的try…catch…finally这种处理&#xff0c;在Go中引入了defer、panic、recover处理方式&#xff0c;通过抛出一个panic异常&#xff0c;然后在defer中通过recover捕获这个异常&#xff0c;最后正常处理。Go程序中&#xff0c;也支持自定义异常处理&#xff0c…

Kotlin基本语法 4 类

1.定义类 package classStudyclass Player {var name:String "jack"get() field.capitalize()set(value) {field value.trim()} }fun main() {val player Player()println(player.name)player.name " asdas "println(player.name)} 2.计算属性与防范…

2.20 day2 QT

自由发挥登录窗口的应用场景&#xff0c;实现一个登录窗口界面 #include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {//窗口相关设置this->setWindowTitle("登入页面"); //设置 窗口 标题this->setWindowIcon(QIcon("D:…

github新手用法详解

GitHub是一个非常强大的版本控制工具&#xff0c;它为程序员提供了一个便捷的方式来管理代码、协作开发和参与开源项目。但对于新手来说&#xff0c;可能会觉得GitHub的使用有些复杂。因此&#xff0c;本篇文章将详细介绍GitHub的基本用法&#xff0c;帮助新手快速上手并充分利…

【智改数转】2024年四川省制造业智能化改造数字化转型项目申报条件方向及填报要求时间

一、项目方向 重点围绕企业智改数转网联、产业链和集群数字化转型、服务能力支撑项目建设3个方向填报智改数转项目信息。 1、企业智改数转网联 支持人工智能、大数据、云计算、5G、物联网等信息技术在制造全过程、全要素深度融合运用。支持生产设备数字化改造、智能装备和软…

中间件-面试题

一、Dubbo 1、Dubbo 的服务请求失败怎么处理 dubbo2默认重试次数2,dubbo3默认重试次数-1可以根据不同场景选择容错策略 失败自动切换:当出现失败时,重试其它服务器失败自动恢复:后台记录失败请求,定时重发。这种策略通常用于消息通知操作失败安全策略,如果出现服务通信异…

深度学习图像处理基础

这里写目录标题 分辨率是什么 视网膜屏视网膜屏人眼的视觉视力 像素密度设置合适的PPI&#xff0c;制造视网膜屏 色彩是什么色匹配实验色彩匹配的意义量化色彩匹配白色合为1色度图 总结 HDR光亮度&#xff08;尼特&#xff09;灰阶亮度范围HDR显示技术总结 一级目录二级目录二级…

Job 和 DaemonSet

一、Job 1、Job 背景问题 K8s 里&#xff0c;最小的调度单元是 Pod&#xff0c;如果直接通过 Pod 来运行任务进程&#xff0c;会产生以下几种问题&#xff1a; ① 如何保证 Pod 内进程正确的结束&#xff1f; ② 如何保证进程运行失败后重试&#xff1f; ③ 如何管理多个任…

EXCEL通过VBA字典的方式将各个分表的数据经过计算后显示在总表中

EXCEL通过VBA字典的方式将各个分表的数据经过计算后显示在总表中 Sub 按钮1_Click() Dim wba As Workbook Dim shta As Worksheet Dim ak(1 To 2000) As String i 1 Dim fil As Stringfil Dir(ThisWorkbook.Path & "\*.xls*")Do While fil <> "&qu…

曾经爆火的「流批一体」现在怎么样了?

2021年和2022年&#xff0c;曾经有一个概念在整个数据开发方向传播&#xff0c;不管是懂和不懂的人&#xff0c;都能扯上一两句。那就是大家耳熟能详的「流批一体」。 时至今日&#xff0c;已经很少有人再提起这个话题&#xff0c;这个概念在21、22年很多面试中也会被面试官问到…

USACO 2024年1月比赛 铜组 BALANCING BACTERIA

第三题&#xff1a;BALANCING BACTERIA 标签&#xff1a;思维、差分 题意&#xff1a;给定 n n n个数&#xff0c; a 1 , a 2 , a 3 . . . a n a_1,a_2,a_3...a_n a1​,a2​,a3​...an​&#xff0c;每次操作 可以选择数字 L &#xff08; 1 < L < n &#xff09; L…

【linux】vim多行操作命令

文章目录 1. vim多行同时修改2. vim复制/移动多行3. vim删除多行4. vim设置缩进空格 回顾&#xff1a;vi/vim常用命令 1. vim多行同时修改 &#xff08;1&#xff09; ctrl v &#xff08;2&#xff09; 按 下箭头&#xff0c;选择多行 &#xff08;3&#xff09; shift i,…

软考笔记--信息系统开发方法(上)

信息系统是一个极其复杂的人机交互系统&#xff0c;它不仅包含计算机技术&#xff0c;通信技术和网络规划以及其他的工程技术&#xff0c;而且&#xff0c;它还是一个复杂的管理系统&#xff0c;需要管理理论和方法的支持&#xff0c;因此&#xff0c;与其他工程项目相比&#…

自然语言转SQL的应用场景探索

自然语言转SQL的应用场景探索 1. 自然语言转sql有哪些解决方案2. 自然语言转sql有哪些应用场景3. 自然语言转sql在智能制造领域有哪些应用场景 1. 自然语言转sql有哪些解决方案 自然语言转SQL&#xff08;NL2SQL&#xff09;是一个涉及自然语言处理&#xff08;NLP&#xff09…

JNI教程之数组操作

1. 创建数组&#xff1a;New[type]Array /** 新建数组 length: the array length. RETURNS: Returns a Java array, or NULL if the array cannot be constructed. */ jbyteArray javaArray env->NewByteArray(1024*1024);New[PrimitiveType]Array RoutinesArray TypeNewB…

[嵌入式AI从0开始到入土]15_orangepi_aipro欢迎界面、ATC bug修复、镜像导出备份

[嵌入式AI从0开始到入土]嵌入式AI系列教程 注&#xff1a;等我摸完鱼再把链接补上 可以关注我的B站号工具人呵呵的个人空间&#xff0c;后期会考虑出视频教程&#xff0c;务必催更&#xff0c;以防我变身鸽王。 第1期 昇腾Altas 200 DK上手 第2期 下载昇腾案例并运行 第3期 官…

单片机学习笔记---红外遥控(外部中断)

目录 红外遥控简介 硬件电路 基本发送与接收 NEC编码​​​​​​​ 遥控器键码 复习外部中断和定时器 红外遥控简介 红外遥控是利用红外光进行通信的设备&#xff0c;由红外LED将调制后的信号发出&#xff0c;由专用的红外接收头进行解调输出 通信方式&#xff1a;单工…

WebGL中开发科学数据可视化应用

WebGL在科学数据可视化领域有广泛的应用&#xff0c;可以用于呈现和解释复杂的科学数据。以下是在WebGL中开发科学数据可视化应用时的一些建议&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.选择合…

C++开发基础之函数的参数类型高级用法

前言 当涉及到高级参数传递方式时&#xff0c;有几种常见的技术可以在 C 中使用。下面是对每种技术的详细介绍&#xff0c;并附带示例说明&#xff1a; 1. 指针的引用&#xff08;Reference to Pointer&#xff09; 指针的引用允许在函数内部修改指针本身&#xff0c;而不仅…