el-table进阶(每条数据分行或合并)

最麻烦的还是css样式,表格样式自己调吧

<!-- ——————————————————————————————————根据数据拓展表格—————————————————————————————————— -->
<div style="display: flex"><div style="width: 100px"><divstyle="height: 41px;border: 1px solid #8f8e8e;border-right: none;background-color: #555555;"></div><divclass="runwayState"style="border: 1px solid #8f8e8e;border-right: none;height: 100%;display: flex;">使用跑道 灯光情况</div></div><div style="flex: 1"><el-table :data="tableData" style="width: 100%" class="custom-table"><el-table-column label="使用跑道" width="150"><template slot-scope="scope"><el-row><el-col :span="6"><div>起</div></el-col><el-col :span="18"><div><el-form-item :prop="'way' + scope.$index + '_3'"><el-inputv-model="scope.row['way' + scope.$index + '_3']"maxlength="10"></el-input></el-form-item></div></el-col></el-row><el-row><el-col :span="6"><div>降</div></el-col><el-col :span="18"><div><el-form-item :prop="'way' + scope.$index + '_3'"><el-inputv-model="scope.row['way' + scope.$index + '_3']"maxlength="10"></el-input></el-form-item></div></el-col></el-row></template></el-table-column><!-- 坡度灯列 --><el-table-column label="坡度灯"><template slot-scope="scope"><el-row><el-col :span="24"><div><el-form-item :prop="'way' + scope.$index + '_3'"><el-inputv-model="scope.row['way' + scope.$index + '_3']"maxlength="3"></el-input></el-form-item></div></el-col></el-row><el-row><el-col :span="24"><div><el-form-item :prop="'way' + scope.$index + '_4'"><el-inputv-model="scope.row['way' + scope.$index + '_4']"maxlength="3"></el-input></el-form-item></div></el-col></el-row></template></el-table-column><!-- 进近灯列 --><el-table-column label="进近灯"><template slot-scope="scope"><el-row><el-col :span="24"><div><el-form-item :prop="'way' + scope.$index + '_5'"><el-inputv-model="scope.row['way' + scope.$index + '_5']"maxlength="3"></el-input></el-form-item></div></el-col></el-row><el-row><el-col :span="24"><div><el-form-item :prop="'way' + scope.$index + '_6'"><el-inputv-model="scope.row['way' + scope.$index + '_6']"maxlength="3"></el-input></el-form-item></div></el-col></el-row></template></el-table-column><!-- 跑道灯列 --><el-table-column label="跑道灯"><template slot-scope="scope"><el-row><el-col :span="24"><div><el-form-item :prop="'way' + scope.$index + '_7'"><el-inputv-model="scope.row['way' + scope.$index + '_7']"maxlength="3"></el-input></el-form-item></div></el-col></el-row><el-row><el-col :span="24"><div><el-form-item :prop="'way' + scope.$index + '_8'"><el-inputv-model="scope.row['way' + scope.$index + '_8']"maxlength="3"></el-input></el-form-item></div></el-col></el-row></template></el-table-column><!-- 滑行灯列 --><el-table-column label="滑行灯"><template slot-scope="scope"><el-row><el-col :span="24"><div><el-form-item :prop="'way' + scope.$index + '_9'"><el-inputv-model="scope.row['way' + scope.$index + '_9']"maxlength="3"></el-input></el-form-item></div></el-col></el-row><el-row><el-col :span="24"><div><el-form-item :prop="'way' + scope.$index + '_10'"><el-inputv-model="scope.row['way' + scope.$index + '_10']"maxlength="3"></el-input></el-form-item></div></el-col></el-row></template></el-table-column><!-- 灯光科列 --><el-table-column label="灯光科"><template slot-scope="scope"><el-form-item :prop="'way' + scope.$index + '_11'"><el-inputv-model="scope.row['way' + scope.$index + '_11']"maxlength="3"></el-input></el-form-item></template></el-table-column><!-- 气象列 --><el-table-column label="AWOS旋钮"><template slot-scope="scope"><el-form-item :prop="'way' + scope.$index + '_12'"><el-inputv-model="scope.row['way' + scope.$index + '_12']"maxlength="5"></el-input></el-form-item></template></el-table-column><!-- 时间列 --><el-table-column label="时间"><template slot-scope="scope"><el-form-item :prop="'way' + scope.$index + '_13'"><el-inputv-model="scope.row['way' + scope.$index + '_13']"maxlength="5"></el-input></el-form-item></template></el-table-column><!-- 签名列 --><el-table-column label="签名"><template slot-scope="scope"><el-form-item :prop="'way' + scope.$index + '_14'"><el-inputv-model="scope.row['way' + scope.$index + '_14']"maxlength="3"></el-input></el-form-item></template></el-table-column></el-table></div>
</div>

数据形式:

     tableData: [{way0_1: "起",way0_2: "降",way0_3: "10",way0_4: "12",way0_5: "5",way0_6: "7",way0_7: "8",way0_8: "10",way0_9: "9",way0_10: "11",way0_11: "3",way0_12: "25°C",way0_13: "14:30",way0_14: "John",},{way1_1: "起",way1_2: "降",way1_3: "9",way1_4: "11",way1_5: "4",way1_6: "6",way1_7: "7",way1_8: "9",way1_9: "8",way1_10: "10",way1_11: "2",way1_12: "24°C",way1_13: "15:00",way1_14: "Alice",},{way2_1: "起",way2_2: "降",way2_3: "10",way2_4: "12",way2_5: "5",way2_6: "7",way2_7: "8",way2_8: "10",way2_9: "9",way2_10: "11",way2_11: "3",way2_12: "25°C",way2_13: "14:30",way2_14: "John",},// 可以继续添加更多的数据行],

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

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

相关文章

Java Spring Boot 目录结构介绍

Java Spring Boot 是一个用于简化Java应用程序开发的框架&#xff0c;它提供了一套灵活、易用的开发工具和约定&#xff0c;帮助开发者更快速地构建各种类型的Java应用程序。Spring Boot 的目录结构是一个重要的组成部分&#xff0c;它规定了如何组织和管理项目代码和资源文件。…

cpp primer笔记-010开始

下面的第5行代码可以写成第6行注释的代码#include<iostream> int main() {int v1{}, v2{};(std::cin >> v1) >> v2;//std::cin>>v1>>v2;(std::cout << v1) << " " << v2 << std::endl;return 0; }char类型在有…

oralce配置访问白名单的方法

目录 配置sqlnet.ora文件 重新加载使配置生效 注意事项 Oracle数据库安全性提升&#xff1a;IP白名单的配置方法 随着互联网的发展&#xff0c;数据库安全问题也越来越严重。Oracle是目前使用较为广泛的一款数据库管理系统&#xff0c;而IP白名单作为提升数据库安全性的有效…

深度学习——权重衰减(weight_decay)

深度学习——权重衰减&#xff08;weight_decay) 文章目录 前言一、权重衰减1.1. 范数与权重衰减1.2. 高维线性回归1.3. 从零开始实现1.3.1.初始化模型参数1.3.2. 定义L₂范数惩罚1.3.3. 定义训练代码实现1.3.4. 不管正则化直接训练1.3.5. 使用权重衰减 1.4. 简洁实现 总结 前言…

vue 项目打包性能分析插件 webpack-bundle-analyzer

webpack-bundle-analyzer 是 webpack 的插件&#xff0c;需要配合 webpack 和 webpack-cli 一起使用。这个插件可以读取输出文件夹&#xff08;通常是 dist&#xff09;中的 stats.json 文件&#xff0c;把该文件可视化展现&#xff0c;生成代码分析报告&#xff0c;可以直观地…

Leetcode901-股票价格跨度

一、前言 本题基于leetcode901股票价格趋势这道题&#xff0c;说一下通过java解决的一些方法。并且解释一下笔者写这道题之前的想法和一些自己遇到的错误。需要注意的是&#xff0c;该题最多调用 next 方法 10^4 次,一般出现该提示说明需要注意时间复杂度。 二、解决思路 ①…

神经网络中的知识蒸馏

多分类交叉熵损失函数&#xff1a;每个样本的标签已经给出&#xff0c;模型给出在三种动物上的预测概率。将全部样本都被正确预测的概率求得为0.70.50.1&#xff0c;也称为似然概率。优化的目标就是希望似然概率最大化。如果样本很多&#xff0c;概率不断连乘&#xff0c;就会造…

Qt编程中采用signal传递自定义数据类型

本文介绍Qt编程中采用signal传递自定义数据类型&#xff08;结构体类型&#xff09;。 Qt编程中可以通过signal传递标准类型&#xff0c;如常见的int,QString,bool类型&#xff0c;有时候需要传递特定的数据类型如结构体&#xff0c;Qt是不支持直接传递的&#xff0c;若将其分…

关于丢失msvcp71.dll的5个解决办法,msvcp71.dll丢失原因分析

计算机已经成为我们生活和工作中不可或缺的一部分&#xff0c;在使用计算机的过程中&#xff0c;我们经常遇到各种软件或应用程序崩溃的情况。其中&#xff0c;一个常见的错误提示是“MSVCP71.dll丢失”。这个错误通常出现在运行使用Visual C Redistributable for Visual Studi…

数据结构——多重链表的实现

//多重列表的实现 #include<stdio.h> #include<stdlib.h> struct lnode {int row,col,value; }; //没有用到down指针 //没有用到tag和next指针 typedef struct node {int tag;//区分头结点(0)和非零元素结点(1)struct node* right;struct node* down;//共用体与结…

Django基础讲解-路由控制器和视图(Django-02)

一 路由控制器 参考链接&#xff1a; Django源码阅读&#xff1a;路由&#xff08;二&#xff09; - 知乎 Route路由, 是一种映射关系&#xff01;路由是把客户端请求的 url路径与视图进行绑定 映射的一种关系。 这个/timer通过路由控制器最终匹配到myapp.views中的视图函数 …

抄写Linux源码(Day14:从 MBR 到 C main 函数 (3:研究 head.s) )

回忆我们需要做的事情&#xff1a; 为了支持 shell 程序的执行&#xff0c;我们需要提供&#xff1a; 1.缺页中断(不理解为什么要这个东西&#xff0c;只是闪客说需要&#xff0c;后边再说) 2.硬盘驱动、文件系统 (shell程序一开始是存放在磁盘里的&#xff0c;所以需要这两个东…

应用第三方ByteTrack实现目标跟踪

在上一篇博文&#xff0c;我们实现了应用官网ByteTrack实现的目标跟踪。但吹毛求疵地说&#xff0c;官网的ByteTrack有一些不足&#xff1a;1、为了通用性及科研的要求&#xff0c;代码过于冗长&#xff0c;但这不利于集成到自己的程序中&#xff1b;2、目标跟踪结果没有目标类…

MDC方式实现简单链路追踪

MDC 方式实现日志链路追踪 拦截器 package com.cdn.log.interceptor;import com.cdn.log.consts.CLogConst; import com.cdn.log.utils.IdUtil; import org.slf4j.MDC; import org.springframework.util.StringUtils; import org.springframework.web.servlet.ModelAndView; im…

山西电力市场日前价格预测【2023-10-08】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-10-08&#xff09;山西电力市场全天平均日前电价为258.40元/MWh。其中&#xff0c;最高日前电价为496.19元/MWh&#xff0c;预计出现在18:45。最低日前电价为0.00元/MWh&#xff0c;预计出…

PMP考试需要多少钱?费用总计来啦!

PMP项目管理专业人士资格认证是由项目管理协会&#xff08;Project Management Institute&#xff0c;简称PMI&#xff09;发起的。PMP作为世界级的项目管理认证证书&#xff0c;拥有着先进的项目管理知识体系&#xff0c;它严格评估项目管理人员知识技能是否具有高品质的资格认…

【FreeRTOS】内存管理简单介绍

有没有想过什么移植FreeRTOS时&#xff0c;为什么有多种的内存文件&#xff0c;我们工程只使用Heap_4&#xff0c;其他的有什么用&#xff1f;每个的区别是什么&#xff1f;FreeRTOS是一种流行的实时操作系统&#xff0c;广泛应用于嵌入式系统开发中。在嵌入式系统中&#xff0…

JEPG Encoder IP verilog设计及实现

总体介绍: 采用通用的常规 Verilog 代码编写,可用于任何 FPGA。 该内核不依赖任何专有 IP 内核,而是用 Verilog 编写了实现 JPEG 编码器所需的所有功能,代码完全独立。 编码器内核的输入是一条 24 位数据总线,红色像素、绿色像素和蓝色像素各有 8 位。 信号 "data_i…

记录使用vue-test-utils + jest 在uniapp中进行单元测试

目录 前情安装依赖package.json配置jest配置测试文件目录编写setup.js编写第一个测试文件jest.fn()和jest.spyOn()jest 解析scss失败测试vuex$refs定时器测试函数调用n次手动调用生命周期处理其他模块导入的函数测试插槽 前情 uniapp推荐了测试方案dcloudio/uni-automator&…

vue+vite项目静态文件引用丢失

排查问题&#xff1a; 查看vite.config.js中是否配置 base: ./, 如果配置了&#xff0c;那么 本地运行 例如&#xff1a;css中引入字体&#xff0c;可将字体文件直接放在public文件夹下通过"/"引入 如果需要动态引入图片&#xff0c;可通过 import defaultA fr…