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.hqwc.cn/news/130470.html

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

相关文章

Multi-Grade Deep Learning for Partial Differential Equations

论文阅读&#xff1a;Multi-Grade Deep Learning for Partial Differential Equations with Applications to the Burgers Equation Multi-Grade Deep Learning for Partial Differential Equations with Applications to the Burgers Equation符号定义偏微分方程定义FNN定义PI…

Android:自定义原生TimePickerDialog样式

效果图&#xff1a; 目标效果图&#xff1a; 原生效果&#xff1a; 实现&#xff1a; 首先是Dialog样式&#xff1a; <style name"TimePickerDialogStyle" parent"style/Theme.AppCompat.DayNight.Dialog.Alert"><item name"android:time…

Stretched mesh

https://www.particleincell.com/2015/stretched-mesh/

JavaScript入门——(5)函数

1、为什么需要函数 函数&#xff1a;function&#xff0c;是被设计为执行特定任务的代码块 说明&#xff1a;函数可以把具有相同或相似逻辑的代码“包裹”起来&#xff0c;通过函数调用执行这些被“包裹”的代码逻辑&#xff0c;有利于精简代码方便复用。 比如之前使用的ale…

大运新能源天津车展深度诠释品牌魅力 为都市人群打造理想车型

如今&#xff0c;新能源汽车行业发展潜力巨大&#xff0c;不断吸引无数车企入驻新能源汽车赛道&#xff0c;而赛道的持续紧缩也让一部分车企很难找到突破重围的机会。秉持几十年的造车经验&#xff0c;大运新能源凭借雄厚的品牌实力从一众车企中脱颖而出。从摩托车到重卡&#…

ThreeJS-3D教学五-材质

我们在ThreeJS-3D教学二&#xff1a;基础形状展示中有简单介绍过一些常用的材质&#xff0c;这次我们举例来具体看下效果&#xff1a; 代码是这样的&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&…

USB协议层数据格式

USB协议 1. 硬件拓扑结构2. 协议层2.1 字节/位传输顺序2.2 SYNC域2.3 包格式2.3.1 PID域2.3.2 令牌包(Token)2.3.3 数据包2.3.4 握手包 2.4 传输细节2.4.1 传输(Transfer)和事务(Transaction)2.4.2 过程(stage)和阶段(phase)2.4.3 批量传输2.4.4 中断传输2.4.5 实时传输2.4.6 控…

算法通过村第十三关-术数|青铜笔记|数字与数学

文章目录 前言数字统计专题符号统计阶乘0的个数 溢出问题整数反转字符串转整数回文数 进制专题七进制数进制转换 总结 前言 提示&#xff1a;生活是正着来生活&#xff0c;倒着去理解。 --戴维迈尔斯《社会心理学》 数学是学生时代掉头发的学科&#xff0c;那算法是毕业后掉头发…

【JavaScript】浅拷贝与深拷贝

引言 浅拷贝、深拷贝是对引用类型而言的。 引用类型的变量对应一个栈区地址&#xff0c;这个栈区地址处存储的值是存放的真正的数据的堆区地址。 基本数据类型的变量也对应一个栈区地址&#xff0c;但是该地址存储的是其真正的值。 let a b发生了什么&#xff1f; let obj…

怎么抓取淘宝商品详情数据?

抓取淘宝商品数据成为了众多企业和个人研究市场趋势、竞品分析、价格监控等目的的重要手段。本文将深入探讨如何抓取淘宝商品数据&#xff0c;以及涉及的法律和伦理问题。 一、抓取淘宝商品详情数据的方法 抓取淘宝商品数据的方法多种多样&#xff0c;其中最常见的包括&#…

途虎养车上市、京东养车“震虎”,如何突围汽车后市场?

“汽车后市场第一股”终于来了&#xff01; 赶在十一黄金周之前&#xff0c;途虎养车股份有限公司(09690.HK&#xff0c;下称“途虎养车”)于9月26日挂牌港交所&#xff0c;开盘价为28港元/股&#xff0c;与发行价持平&#xff1b;IPO首日报收29.50港元/股&#xff0c;涨幅5.3…

【gitlab】从其他仓库创建项目

需求描述 解决方法 以renren-fast脚手架为例 第一步 第二步 第三步 第四步 参考文章