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,一经查实,立即删除!

相关文章

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;就会造…

关于丢失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;所以需要这两个东…

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

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

【FreeRTOS】内存管理简单介绍

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

(三)行为模式:8、状态模式(State Pattern)(C++示例)

目录 1、状态模式&#xff08;State Pattern&#xff09;含义 2、状态模式的UML图学习 3、状态模式的应用场景 4、状态模式的优缺点 &#xff08;1&#xff09;优点 &#xff08;2&#xff09;缺点 5、C实现状态模式的实例 1、状态模式&#xff08;State Pattern&#x…

光伏发电预测(LSTM、CNN_LSTM和XGBoost回归模型,Python代码)

运行效果&#xff1a;光伏发电预测&#xff08;LSTM、CNN_LSTM和XGBoost回归模型&#xff0c;Python代码&#xff09;_哔哩哔哩_bilibili 运行环境库的版本 光伏太阳能电池通过互连形成光伏模块&#xff0c;以捕捉太阳光并将太阳能转化为电能。因此&#xff0c;当光伏模块暴露…

深入探究 C++ 编程中的资源泄漏问题

目录 1、GDI对象泄漏 1.1、何为GDI资源泄漏&#xff1f; 1.2、使用GDIView工具排查GDI对象泄漏 1.3、有时可能需要结合其他方法去排查 1.4、如何保证没有GDI对象泄漏&#xff1f; 2、进程句柄泄漏 2.1、何为进程句柄泄漏&#xff1f; 2.2、创建线程时的线程句柄泄漏 …

成功解决@Async注解不生效的问题,异步任务处理问题

首先&#xff0c;有这样一个异步监听方法 然后配置好了异步线程池 package com.fdw.study.config;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Conf…

国产1.8V低电压输入,可用于驱动步进电机;H 桥驱动电路单元可以直接驱动IR-CUT

D6212是专为安防摄像头系统设计的驱动电路&#xff0c;电路由八路达林顿管 阵列和 H 桥驱动电路两个单元组成。八路达林顿管阵列均带有续流二极 管&#xff0c;可用于驱动步进电机&#xff1b;H 桥驱动电路单元可以直接驱动IR-CUT。单个 达林顿管在输入电压低至 1.8V 状态下支持…

口袋参谋:如何提升宝贝流量?这三种方法超实用!

​你的店铺能不能出爆款&#xff1f;提升单品流量是关键。 对于新手卖家来说&#xff0c;是缺乏运营技巧和运营经验的&#xff0c;运营技巧主要体现在标题写作、各种图片和视频制作等。 由于新手买家没有经验&#xff0c;习惯于直接使用数据包上传&#xff0c;导致宝贝没有展…

Java卷上天,可以转行干什么?

小刚是某名企里的一位有5年经验的高级Java开发工程师&#xff0c;每天沉重的的工作让他疲惫不堪&#xff0c;让他萌生出想换工作的心理&#xff0c;但是转行其他工作他又不清楚该找什么样的工作 因为JAVA 这几年的更新实在是太太太……快了&#xff0c;JAVA 8 都还没用多久&am…

cpp primer plus笔记01-注意事项

cpp尽量以int main()写函数头而不是以main()或者int main(void)或者void main()写。 cpp尽量上图用第4行的注释而不是用第5行注释。 尽量不要引用命名空间比如:using namespace std; 函数体内引用的命名空间会随着函数生命周期结束而失效&#xff0c;放置在全局引用的命名空…

PX4仿真添加world模型文件,并使用yolov8进行跟踪

前言 目的:我们是为了在无人机仿真中使用一个汽车模型,然后让仿真的无人机能够识别到这个汽车模型。所以我们需要在无人机仿真的环境中添加汽车模型。 无人机仿真中我们默认使用的empty.world文件,所以只需要将我们需要的模型添加到一起写进这个empty.world文件中去就可以…