el-table 实现动态表头 静态内容 根据数据显示动态输入框

在这里插入图片描述
直接放代码了

          <el-table
            :data="form.tableDataA"
            border
            stripe
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column
              v-for="(category, categoryIndex) in form.tableDataA"
              :key="categoryIndex"
              :label="category.name"
              width="420"
              align="center"
            >
              <el-table-column label="目标" width="160" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="category.children[scope.$index].goal"
                    :maxlength="30"
                    show-word-limit
                  />
                </template>
              </el-table-column>
              <el-table-column label="预判" width="160" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="category.children[scope.$index].prejudge"
                    :maxlength="30"
                    show-word-limit
                  />
                </template>
              </el-table-column>
              <el-table-column label="差距" width="160" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="category.children[scope.$index].gap"
                    :maxlength="30"
                    show-word-limit
                  />
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>

      form: {
        projectId: "", // 项目id
        time: "", // 日期
        producerId: "", // 制定人
        tableDataA: [
          {
            name: "销售额(万元)",
            children: [
              {
                goal: "222",
                prejudge: "",
                gap: "",
              },
            ],
          },
          {
            name: "销售回款(万元)",
            children: [
              {
                goal: "111",
                prejudge: "",
                gap: "",
              },
            ],
          },
          {
            name: "新增入住人数",
            children: [
              {
                goal: "333",
                prejudge: "",
                gap: "",
              },
            ],
          },
        ], // A
        tableDataB: [], // B
        tableDataC: [], // C
        tableDataD: [], // D
        tableDataE: [], // E
        tableDataF: [], // F
      },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软考高级架构师下篇-12层次式架构设计理论与实践

目录 1. 考情分析2. 层次式体系结构概述3. 表现层框架设计4. 中间层框架设计5. 数据访问层设计6. 数据架构规划与设计7. 物联网层次架构设计8. 前文回顾1. 考情分析 根据考试大纲,层次式架构设计理论与实践知识点会涉及单选题型(约占2~5分)和案例题(25分),本小时内容偏重于方…

Postman接口自动化测试实例

一.实例背景 在实际业务中&#xff0c;经常会出现让用户输入用户密码进行验证的场景。而为了安全&#xff0c;一般都会先请求后台服务器获取一个随机数做为盐值&#xff0c;然后将盐值和用户输入的密码通过前端的加密算法生成加密后串传给后台服务器&#xff0c;后台服务器接到…

【MySQL系列】ALTER语句详解,以及UPDATE,DELECT,TRUNCATE语句的使用+区别

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

PHP数组

数组是一个能在单个变量中存储多个值的特殊变量。 数组的英文是array,可以存入多个不同类型的数据&#xff0c;是一个复合数据类型。 在 PHP 中&#xff0c;有三种类型的数组&#xff1a; 索引数组 - 带有数字 ID 键的数组关联数组 - 带有指定的键的数组&#xff0c;每个键关…

ubuntu18.04安装远程控制软件ToDest方法,针对官网指令报错情况

有时我们在家办公&#xff0c;需要控制实验室的笔记本&#xff0c;因此好用的远程控制软件会让我们的工作事半功倍&#xff01; 常用的远程控制软件有ToDesk&#xff0c;向日葵&#xff0c;以及TeamViewer&#xff0c;但是为感觉ToDesk更流畅一些&#xff0c;所以这里介绍一下…

系统报错mfc100u.dll丢失的解决方法(完美解决dll问题)

系统文件mfc100u.dll丢失和出错&#xff0c;极有可能是盗号木马、流氓软件等恶意程序所导致&#xff0c;其感染相关文件并加载起来&#xff0c;一旦杀毒软件删除被感染的文件&#xff0c;就会导致相关组件缺失&#xff0c;游戏等常用软件运行不起来&#xff0c;且提示“无法启动…

QT 使用图表

目录 1、概念 1.1 坐标轴-QAbstractAxis 1.2 系列-QAbstractSeries 1.3 图例-Legend 1.4 图表-QChart 1.5 视图-QChartView 2、 QT 折线图 2.1 Qt 折线图介绍 2.2 Qt 折线图实现 Qt 图表是专门用来数据可视化的控件 Qt 图表包含折线、饼图、棒图、散点图、范围图等。…

【工具】 删除Chrome安装的“创建快捷方式”

创建Chrome的快捷方式&#xff0c;可以放在桌面&#xff0c;想用时双击就可以打开网页&#xff0c;比书签&#xff08;brookmark&#xff09;结构化管理更方便。 但是&#xff0c;安装一时爽&#xff0c;卸载有问题。 如果用 windows 控制面板\所有控制面板项\程序和功能 卸载…

Redis五大基本数据类型及其使用场景

文章目录 **一 什么是NoSQL&#xff1f;****二 redis是什么&#xff1f;****三 redis五大基本类型**1 String&#xff08;字符串&#xff09;**应用场景** 2 List&#xff08;列表&#xff09;**应用场景** 3 Set&#xff08;集合&#xff09;4 sorted set&#xff08;有序集合…

Window下部署使用Stable Diffusion AI开源项目绘图

Window下部署使用Stable Diffusion AI开源项目绘图 前言前提条件相关介绍Stable Diffusion AI绘图下载项目环境要求环境下载运行项目打开网址&#xff0c;即可体验文字生成图像&#xff08;txt2img&#xff09;庐山瀑布 参考 本文里面的风景图&#xff0c;均由Stable Diffusion…

VM部署CentOS并且设置网络

最近在准备学习k8s&#xff0c;需要部署服务器&#xff0c;所以需要在虚拟机中部署centOS服务&#xff0c;接下来我们将一步一步到操作来&#xff0c;如何在VM中不是CentOS系统。 一&#xff1a;环境 VMware Workstation Pro 链接&#xff1a;https://pan.baidu.com/s/1hSKr…

积跬步至千里 || 矩阵可视化

矩阵可视化 矩阵可以很方面地展示事物两两之间的关系&#xff0c;这种关系可以通过矩阵可视化的方式进行简单监控。 定义一个通用类 from matplotlib import pyplot as plt import seaborn as sns import numpy as np import pandas as pdclass matrix_monitor():def __init…

Spring Clould 搜索技术 - elasticsearch

视频地址&#xff1a;微服务&#xff08;SpringCloudRabbitMQDockerRedis搜索分布式&#xff09; 初识ES-什么是elasticsearch&#xff08;P77&#xff0c;P78&#xff09; 1.elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能…

java学习004

常用数据结构对应 php中常用的数据结构是Array数组&#xff0c;相对的在java开发中常用的数据结构是ArrayList和HashMap&#xff0c;它们可以看成是array的拆分&#xff0c;一种简单的对应关系为 PHPJAVAArray: array(1,2,3)ArrayListlArray: array(“name” > “jack”,“…

iPhone开启“轻点唤醒”功能但点击屏幕无反应怎么解决?

iPhone的“轻点唤醒”功能启用时&#xff0c;用户只需手指轻触或点击手机屏幕即可快速唤醒设备&#xff0c;无需按压任何按钮。然而&#xff0c;有些用户在使用“轻点唤醒”功能唤醒屏幕时&#xff0c;遇到该功能失灵&#xff0c;无法正常唤醒屏幕的情况&#xff0c;这是怎么回…

如何在Java实现TCP方式发送和接收Socket消息(多线程模式)

目录 导言&#xff1a;正文&#xff1a;1. 创建Server端&#xff1a;2. 创建Client端&#xff1a;3. 多线程模式&#xff1a; 代码示例Server端代码示例&#xff1a;Client端代码示例&#xff1a;同步模式发送TCP消息异步模式 结论&#xff1a; 导言&#xff1a; 在Java编程中…

python 打印沁园春 雪 居中对齐 文本对齐

以下是python 中使用 DebugInfo 模块居中对齐打印《沁园春・雪》的效果 引入模块 pip install DebugInfopython代码 # -*- coding:UTF-8 -*-# region 引入必要依赖 from DebugInfo.DebugInfo import * # endregion诗文 沁园春 雪 作者: 毛主席 北国风光&#xff0c;千里冰封…

【Linux C】在sprintf中打印双引号

0x00 前言 最后更新日期&#xff1a;2023.8.16 0x01 在sprintf中打印双引号 在字符串中有双引号”的地方前面加上一个反斜杠“\”即可&#xff0c;例如&#xff1a; char szProQuery[256] {0}; char name[256] "XiaoMing"; sprintf(szProQuery,"%s said :…

“心理健康人工智能产学研创新联盟”揭牌成立|深兰科技

8月14日上午&#xff0c;“2023树洞救援年会”在上海举行&#xff0c;会上举行了“心理健康人工智能产学研创新联盟”的签约和揭牌仪式。“树洞行动救援团”创始人深兰科技科学院智能科学首席科学家、荷兰阿姆斯特丹自由大学人工智能系终身教授黄智生&#xff0c;深兰科技集团创…

sip网络号角喇叭 sip音柱 POE供电广播音箱 ip网络防水对讲终端 sip网络功放

SV-7042TP网络号角喇叭 一、描述 SV-7042TP是我司的一款SIP网络号角喇叭&#xff0c;具有10/100M以太网接口&#xff0c;内置有一个高品质扬声器&#xff0c;将网络音源通过自带的功放和喇叭输出播放&#xff0c;可达到功率30W。SV-7042TP作为SIP系统的播放终端&#xff0c;可…