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.rhkb.cn/news/150738.html

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

相关文章

Python编程:创建图像浏览器应用程序

介绍&#xff1a; 图像浏览器应用程序是一种非常常见和实用的工具。它们使用户能够轻松地浏览和管理计算机中的图像文件。本文将介绍如何使用Python编程语言和wxPython库创建一个简单的图像浏览器应用程序。我们将学习如何利用Python的os模块进行文件和文件夹操作&#xff0c;以…

【探索AI潜能,连结现代通讯】相隔万里,我们与AI一同赏月。

1️⃣写在前面 近年来&#xff0c;AI得到了迅猛的发展&#xff0c;尤其是大模型的出现受到了广泛的关注和讨论&#x1f680;。ChatGPT、文心一言等纷纷登场&#xff0c;可谓是百家争鸣❗ 而AI大模型所延申出的子项目如AI绘画、AI写作等&#xff0c;在各自的领域展示出了惊人的…

Linux和Hadoop的学习

目录 1. Linux的常用快捷键2. Hadoop集群部署问题汇总 1. Linux的常用快捷键 复制&#xff1a;CtrlshiftC 粘贴&#xff1a;CtrlshiftV TAB&#xff1a;补全命令 编写输入&#xff1a;i 退出编写&#xff1a;esc 保存并退出&#xff1a;shift&#xff1a; 2. Hadoop集群部署问…

趣味工具箱小程序源码

趣味工具箱小程序源码&#xff0c;支持功能去水印&#xff0c;精选壁纸&#xff0c;图片压缩&#xff0c;文字生成二维码&#xff0c;图片加水印&#xff0c;模拟来电&#xff0c;手持弹幕&#xff0c;掷骰子…等 使用小工具&#xff0c;一个小程序有几十个功能。 源码下载&am…

2023全新小红书图集和视频解析去水印网站源码

2023全新小红书图集和视频解析去水印网站源码 小红书视频图集解析网站源码&#xff0c;在红书看到好看的图片以及好看的头像&#xff0c;但是直接下载又有水印就非常难受&#xff0c;这个可以一键解析去除水印&#xff0c;支持统计解析次数&#xff0c;本地接口。 源码下载&a…

【浅谈IDE宏指令录制】为加速chrome扩展国际化,我从vscode回归notepad++

vscode 的宏录制功能 —— 差强人意 安装vscode开源扩展&#xff1a;https://github.com/C10udburst/macros-vscode.git 可开启类似于 notetepad 的宏录制与回放功能&#xff01;比如录制字符串替换&#xff0c;能记录操作之时&#xff0c;替换对话框中的文本&#xff01;&am…

(论文调研) Multi-task的网络结构 在图像去噪问题中的应用

1.SNIDER: Single Noisy Image Denoising and Rectification for Improving License Plate Recognition 这是一篇用于实现端到端的车牌恢复 (LPR: License Plate Recognition) 网络, 其中使用去噪和校正网络来生成清晰的恢复图像, 以实现稳健的 LPR 性能. 这个网络的名称为SN…

知识图谱1_2——下载neo4j客户端

客户端下载 这里展现一种通过客户端进行操作的方法 https://neo4j.com/download/ 下载desktop客户端 填写完成后开始下载 下载完成后&#xff0c;在命令行输入 chmod x <文件名> #给予文件权限 sudo add-apt-repository universe #安装.appimage所需的包fuse&#x…

CSS点击切换或隐藏盒子的卷起、展开效果

<template><div class"main"><el-button click"onCllick">切换</el-button><transition name"slideDown"><div class"info" v-if"isShow">1111</div></transition></di…

【AI视野·今日Robot 机器人论文速览 第四十八期】Thu, 5 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Thu, 5 Oct 2023 Totally 32 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers LanguageMPC: Large Language Models as Decision Makers for Autonomous Driving Authors Hao Sha, Yao Mu, Yuxuan Jiang, Li…

select实现服务器并发

select的TCP服务器代码 #include <stdio.h> #include <unistd.h> #include <string.h> #include <sys/types.h> #include <sys/socket.h> #include <arpa/inet.h> #include <netinet/in.h> #include <sys/select.h> #include…

QChart使用说明

一.使用说明 Qt官网例程&#xff1a;https://doc.qt.io/qt-5/qtcharts-examples.html QChart&#xff1a;用于管理图表中的线、图例和轴的图形表示。可以简单理解为是一个画布。QChartView&#xff1a;视图组件&#xff0c;无法单独进行显示&#xff0c;需要依附其他组件进行…

SpringBoot的error用全局异常去处理

记录一下使用SpringBoot2.0.5的error用全局异常去处理 在使用springboot时&#xff0c;当访问的http地址或者说是请求地址输错后&#xff0c;会返回一个页面&#xff0c;如下&#xff1a; 这是因为请求的地址不存在&#xff0c;默认会显示error页面 但我们实际需要一个接口&a…

卷积神经网络的发展历史-VGG

VGG的产生 2014 年&#xff0c;Simonyan和Zisserman提出了VGG系列模型&#xff08;包括VGG-11/VGG-13/VGG-16/VGG-19&#xff09;&#xff0c;并在当年的ImageNet Challenge上作为分类任务第二名、定位&#xff08;Localization&#xff09;任务第一名的基础网络出现。 VGG的…

吃鸡达人必备!超实用干货激爽分享!

大家好&#xff01;作为一名专业吃鸡行家&#xff0c;今天我将为大家分享一些关于提高游戏战斗力和分享顶级游戏作战干货的秘诀&#xff0c;还有一些方便吃鸡作图、装备皮肤库存展示和查询的技巧&#xff01; 首先&#xff0c;让我们来介绍一些吃鸡作图工具推荐。无论是新手还是…

跨境电商系统对接-进口

一、跨境进口方式 1、一般贸易 指中国境内有进出口经营权的企业进行进出口贸易&#xff0c;货物到港后需要先清关&#xff08;办理海关申报、查验、征税、放行等手续&#xff09;&#xff0c;然后货主才能提货&#xff0c;一般贸易适合大批量进口商品&#xff0c;公司的鲜奶、…

ToBeWritten之改进威胁猎杀:自动化关键角色与成功沟通经验

也许每个人出生的时候都以为这世界都是为他一个人而存在的&#xff0c;当他发现自己错的时候&#xff0c;他便开始长大 少走了弯路&#xff0c;也就错过了风景&#xff0c;无论如何&#xff0c;感谢经历 转移发布平台通知&#xff1a;将不再在CSDN博客发布新文章&#xff0c;敬…

群晖搭建docker系统和办公服务2

首先先确认下我们的Office是否为VOL版&#xff0c;方法如下&#xff08;请您根据自身情况更改以下命令&#xff09;&#xff1a; 管理员身份运行命令提示符&#xff0c;输入 cd C:\Program Files\Microsoft Office\Office16 切换目录 &#xff08;这里请根据您自己的Office版本…

MySQL8 间隙锁在11种情况下的锁持有情况分析

测试环境及相关必要知识 测试环境为mysql 8 版本 间隙锁&#xff08;Gap Lock&#xff09;&#xff1a;用于锁定索引范围之间的间隙&#xff0c;防止其他事务在此间隙中插入新记录。间隙锁主要用于防止幻读问题。 在可重复读的隔离级别下默认打开该锁机制&#xff0c;解决幻…

Dubbo3应用开发—Dubbo3注册中心(zookeeper、nacos、consul)的使用

Dubbo3注册中心的使用 zookeeper注册中心的使用 依赖引入 <dependency><groupId>org.apache.dubbo</groupId><artifactId>dubbo-dependencies-zookeeper-curator5</artifactId><version>${dubbo.version}</version><type>p…