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

news2024/11/18 18:40:38

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

<!-- ——————————————————————————————————根据数据拓展表格—————————————————————————————————— -->
<div style="display: flex">
  <div style="width: 100px">
    <div
      style="
        height: 41px;
        border: 1px solid #8f8e8e;
        border-right: none;
        background-color: #555555;
      "
    ></div>
    <div
      class="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-input
                    v-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-input
                    v-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-input
                    v-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-input
                    v-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-input
                    v-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-input
                    v-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-input
                    v-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-input
                    v-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-input
                    v-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-input
                    v-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-input
              v-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-input
              v-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-input
              v-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-input
              v-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.coloradmin.cn/o/1066309.html

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

相关文章

SAP从入门到放弃系列之QM检验方法(Inspection Method)

概述 检验方法描述了如何对检验特征执行检验。 QS21-创建主检验特征时&#xff0c;可以对主检验特征可以分配多种检验方法。关于创建主检验特征详见&#xff1a;SAP从入门到放弃系列之QM主检验特征 当任务清单中包含主检验特征时&#xff0c;将为任务清单中的特征选择特定的…

vue3 -- 封装 Turf.js地图常用方法

Turf.js中文网 地理空间分析库,处理各种地图算法 文档地址 安装 Turf 库 npm install @turf/turf创建src/hooks/useTurf.ts 文件1:获取线中心点 效果: 代码: useTurf.ts import * as turf from @turf/turf// 获取线中心点 export class CenterPointOfLine {

Linux系列讲解 —— 【fsck】检查并修复Linux文件系统

当文件系统出现损坏时&#xff0c;例如文件无法查看&#xff0c;删除等&#xff0c;可以使用 fsck&#xff08;File System Consistency Check&#xff09;进行修复。但是需要注意fsck在修复时&#xff0c;如果检查出某个文件有问题&#xff0c;可能会向用户请求删除。所以&…

分层强化学习 综述论文阅读 Hierarchical Reinforcement Learning: A Comprehensive Survey

分层强化学习 综述论文阅读 Hierarchical Reinforcement Learning: A Comprehensive Survey 摘要一、介绍二、基础知识回顾2.1 强化学习2.2 分层强化学习2.2.1 子任务符号2.2.2 基于半马尔可夫决策过程的HRL符号 2.3 通用项定义 三、分层强化学习方法3.1 学习分层策略 (LHP)3.1…

赴日IT 35岁以上程序员能申请日本技术人文签证吗?

我们都知道&#xff0c;要想去日本工作&#xff0c;必须要办理签证&#xff0c;日本人文技术国际业务签证就是一个非常好的签证种类。那么办理此类签证需要满足哪些要求呢&#xff1f; 年龄上其实比较推荐的是25-35岁这个年龄阶段&#xff0c;因为这个年龄段通常在日语能力和工…

抖音账号矩阵系统开发源码----技术研发

一、技术自研框架开发背景&#xff1a; 抖音账号矩阵系统是一种基于数据分析和管理的全新平台&#xff0c;能够帮助用户更好地管理、扩展和营销抖音账号。 抖音账号矩阵系统开发源码 部分源码分享&#xff1a; ic function indexAction() { //面包屑 $breadc…

elasticsearch内存占用详细分析

内存占用 ES的JVM heap按使用场景分为可GC部分和常驻部分。 可GC部分内存会随着GC操作而被回收&#xff1b; 常驻部分不会被GC&#xff0c;通常使用LRU策略来进行淘汰&#xff1b; 内存占用情况如下图&#xff1a; common space 包括了indexing buffer和其他ES运行需要的clas…

添加/查看/清空购物车 -----苍穹外卖day7

1.添加购物车 产品原型 接口设计 新增类使用post 需求分析 数据库查询过程中设计了冗余字段&#xff0c;意义在于提高查询速度&#xff0c;不用和菜品表中去连接查询&#xff0c;直接查询购物车表。但是冗余字段必须相对稳定不能经常变化 代码开发 在使用DTO与实体类交接的…

国科大体系结构习题 | 第三章 二进制与逻辑电路

第三章 Q1: A1:(1) 原码&#xff1a; [ − ( 2 63 − 1 &#xff0c; 2 63 − 1 ] [-(2^{63}-1&#xff0c;2^{63}-1] [−(263−1&#xff0c;263−1] 补码&#xff1a; [ − ( 2 63 &#xff0c; 2 63 − 1 ] [-(2^{63}&#xff0c;2^{63}-1] [−(263&#xff0c;263−1] …

flex 布局:元素对齐

前言 略 使用flex的align-items属性控制元素对齐 上下对齐并铺满 <view class"more">展开更多<text class"iconfont20231007 icon-zhankai"></text></view>.more {display: flex;flex-direction: row;color: #636363;justify-co…

12P4375X042-233C KJ2005X1-BA1 CE3007 EMERSON servo controller

12P4375X042-233C KJ2005X1-BA1 CE3007 EMERSON servo controller 我们提供三种不同类别的EDGEBoost I/O模块供选择&#xff0c;以实现最大程度的I/O定制: 数字和模拟输入/输出网络和连接边缘人工智能和存储 利用EDGEBoost I/O实现变革性技术 EBIO-2M2BK EBIO-2M2BK载板支持…

IGH码云克隆包

1.gitlab仓库比较慢 该开源包是由德国的团队维护在gitlab上的&#xff0c;但是在国内下载的比较慢&#xff0c;时常打不开。故而把这个包通过码云克隆了一遍。 地址如下&#xff1a; ​​​​​​​ethercat-igh: 这个是gitlab上比较新的仓库&#xff0c;因为从原地址一直无法…

SAP从入门到放弃系列之QM物料规范(Material Specification-物料说明)

目录 一、概述1.1 物料规范的结构1.2 物料规范的使用 二、操作2.1、物料主数据设置2.2、物料说明创建2.3 效果 一、概述 Material Specification-可以翻译为物料说明或者物料规格或物料规范&#xff0c;物料的检验相对简单的时候也可以在系统中使用物料规范&#xff0c;相对于…

Leetcode901-股票价格跨度

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

苹果手机的祛魅时刻,国产厂商的颠覆征程

“iPhone翻车了&#xff1f;”有网友如此质疑。 发布未满一个月&#xff0c;iPhone 15系列多次因负面问题登上热搜。 首先曝出钛金属边框容易沾染指纹的情况&#xff0c;尚未涉及功能性方面&#xff0c;但后续接连曝出发热严重、电池循环次数低、外放破音、Wi-Fi链接缓慢的问…

Android系统启动之init进程启动+Zygote进程启动分析

一、基础概念理解 init进程 Android系统所有进程的祖先&#xff0c;是Android系统内核初始化完毕后&#xff0c;进入用户空间启动的第一个进程。 Android虚拟机 Dalvik虚拟机是谷歌自己设计的用于Android平台的虚拟机。Android4.4同时提供了Dalvik和ART虚拟机。Android5.0以后…

重庆建筑模板厂家:选择桉木模板,智慧之选

随着城市化进程的不断加速&#xff0c;建筑业也呈现出蓬勃发展的势头。而作为建筑过程中不可或缺的材料之一&#xff0c;建筑模板的选择将直接影响到工程质量和工期。在重庆这样一个气候多变、地形复杂的地区&#xff0c;如何选择适合当地情况的建筑模板显得尤为重要。 一、常规…

《第一行代码Andorid》阅读笔记-第六章

第六章 内容提供器 在上一章中我们学了Android数据持久化的技术&#xff0c;包括文件存储、SharedPreferences存储以及数据库存储。使用这些持久化技术所保存的数据都只能在当前应用程序中访问。 虽然文件和SharedPreferences存储中提供了MODE_WORLD_READABLE和MODE_WORLD_WRI…

电脑系统一键重装Win10操作方法教程

如果我们的电脑系统遇到了运行变慢、感染病毒等问题&#xff0c;这时候我们就可以进行系统的重装&#xff0c;这样来解决遇到的系统问题。特别多的用户都想知道一键重装Win10系统的详细步骤&#xff0c;下面小编就给大家带来最详细的操作方法介绍哦&#xff0c;帮助大家轻松完成…

【Vue基础-数字大屏】地图

一、阿里云数据可视化平台 地图数据https://datav.aliyun.com/portal/school/atlas/area_selector 二、操作步骤 1、打开阿里云数据可视化平台&#xff0c;复制中国地图数据链接 2、在浏览器中打开中国地图数据链接&#xff0c;复制json数据 3、在assets静态目录下创建mapDa…