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

news2025/1/15 20:50:31

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

          <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
      },

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

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

相关文章

AWS security 培训笔记

云计算的好处 Amazon S3 (Storage) Amazon EC2 (Compute) 上图aws 的几个支柱&#xff1a;安全是其中一个啦 其中安全有几个方面 IAMdetection基础架构保护数据保护应急响应 关于云供应商的责任 data center 原来长这样 &#xff0c;据说非常之隐蔽的 如果有天退役了&#xf…

回归预测 | MATLAB实现TSO-BP金枪鱼群优化算法优化BP神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现TSO-BP金枪鱼群优化算法优化BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现TSO-BP金枪鱼群优化算法优化BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果…

第1篇:Arduino与ESP32开发板的安装方法

一、下载安装包 arduino2.1.0-esp32_2.0.9-esp8266_3.1.1离线安装包 百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固&#xff0c;支持教育网加速&#xff0c;支持手机端。注册使用百度网盘即可享受免费存储空间https://pan…

计算机网络——OSI与TCP/IP各层的结构与功能,都有哪些协议?

文章目录 一 OSI与TCP/IP各层的结构与功能,都有哪些协议?1.1 应用层1.2 运输层1.3 网络层1.4 数据链路层1.5 物理层1.6 总结一下 二 ⭐TCP 三次握手和四次挥手(面试常客)2.1 TCP 三次握手漫画图解2.2 为什么要三次握手⭐2.3 第2次握手传回了ACK&#xff0c;为什么还要传回SYN&…

小程序的数据绑定和事件绑定

小程序的数据绑定 1.需要渲染的数据放在index.js中的data里 Page({data: {info:HELLO WORLD,imgSrc:/images/1.jpg,randomNum:Math.random()*10,randomNum1:Math.random().toFixed(2)}, }) 2.在WXML中通过{{}}获取数据 <view>{{info}}</view><image src"{{…

C#反编译工具ILSPY

ILSPY ILSpy 是一个开源的.Net程序集浏览器和反编译工具。 Visual Studio 2022附带了默认情况下启用的F12反编译支持&#xff08;使用我们的引擎v7.1&#xff09;。 在Visual Studio 2019中&#xff0c;您必须手动启用F12支持。转到“工具”/“选项”/“文本编辑器”/C#/Adva…

最新ai系统ChatGPT程序源码+详细搭建教程+mj以图生图+Dall-E2绘画+支持GPT4+AI绘画+H5端+Prompt知识库

目录 一、前言 二、系统演示 三、功能模块 3.1 GPT模型提问 3.2 应用工作台 3.3 Midjourney专业绘画 3.4 mind思维导图 四、源码系统 4.1 前台演示站点 4.2 SparkAi源码下载 4.3 SparkAi系统文档 五、详细搭建教程 5.1 基础env环境配置 5.2 env.env文件配置 六、环境…

回归预测 | MATLAB实现SOM-BP自组织映射结合BP神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现SOM-BP自组织映射结合BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现SOM-BP自组织映射结合BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍…

对比学习损失—InfoNCE理论理解

InfoNoise的理解 InfoNCE loss温度系数 τ \tau τ InfoNCE loss 最近在看对比学习的东西&#xff0c;记录点基础的东西 「对比学习」 属于无监督学习的一种&#xff0c;给一堆数据&#xff0c;没有标签&#xff0c;自己学习出一种特征表示。 InfoNCE 这个损失是来自于论文&am…

9.文件基本操作

第四章 文件管理 9.文件基本操作 ​    “打开文件和关闭文件”与平常鼠标双击打开文件和点击“X”关闭文件是有所不同的。 ​    操作系统在处理open系统调用时主要做了以下两件事情&#xff0c;①根据我们提供的文件存放路径在外存当中找到这个目录对应的目录表&#x…

【java毕业设计】基于ssm+mysql+jsp的个性化影片推荐系统设计与实现(程序源码)-个性化影片推荐系统

基于ssmmysqljsp的个性化影片推荐系统设计与实现&#xff08;程序源码毕业论文&#xff09; 大家好&#xff0c;今天给大家介绍基于ssmmysqljsp的个性化影片推荐系统设计与实现&#xff0c;本论文只截取部分文章重点&#xff0c;文章末尾附有本毕业设计完整源码及论文的获取方式…

《知识图谱与大模型融合实践研究报告》发布,创邻科技参编

近期&#xff0c;第三届知识图谱产业发展论坛暨知识图谱与大模型融合研讨会在北京召开。会上&#xff0c;《知识图谱与大模型融合实践研究报告》正式发布&#xff01; 该白皮书是由中国电子技术标准化研究院依托知识图谱产业推进方阵、全国信标委人工智能分委会知识图谱工作组…

图形推理 1

正确答案&#xff1a;D 你的答案&#xff1a;C 官方解析&#xff1a; 根据观察我们发现A、B、C项都为对称图形&#xff0c;只有D项不是。 官方解析&#xff1a; 图形组成元素不相似&#xff0c;先考虑属性规律&#xff0c;再考虑数量规律。属性无明显规律&#xff0c;考虑数量规…

2023-8-14 子矩阵的和

题目链接&#xff1a;子矩阵的和 #include <iostream>using namespace std;int n, m, q; const int N 1010;int a[N][N], s[N][N];int main () {scanf("%d%d%d", &n, &m, &q);for(int i 1; i < n; i )for(int j 1; j < m; j)scanf(&quo…

27、springboot自定义第三方框架和Starter组件及其测试完整版

介绍 ★ 自定义自动配置自动配置类注册 所谓的自动配置&#xff0c;就是通过一个配置类&#xff0c;然后这个配置类在我们容器中定义了大量的bean&#xff0c;然后这些bean也不是直接定义&#xff0c;它是结合了条件注解&#xff0c;只有在某些特定的条件下&#xff0c;才会生…

PHP实现每日蛋白质摄入量计算器

1.laravel 路由 //每日蛋白质摄入计算器Route::get(api/protein/intake, FormulaControllerproteinIntakeCal); 2.代码 /*** 每日蛋白质摄入计算器*/public function proteinIntakeCal(){$number intval($this->request(number));$goalFactor array(0.8, 1.16, 0.8, 1.16,…

[线程/C++]线程同(异)步和原子变量

文章目录 1.线程的使用1.1 函数构造1.2 公共成员函数1.2.1 get_id()1.2.2 join()2.2.3 detach()2.2.5 joinable()2.2.6 operator 1.3 静态函数1.4 call_once 2. this_thread 命名空间2.1 get_id()2.2 sleep_for()2.3 sleep_until()2.4 yield() 3. 线程同步之互斥锁3.1 std:mute…

微分流形学习之一:基本定义

微分流形学习之一&#xff1a;基本定义引入 引言一、微分流形的历史简介二、拓扑空间三、微分流形 引言 本文是作者在学习微分流形的时候的笔记&#xff0c;尽量严格完整&#xff0c;并带有一定理解&#xff0c;绝不是结论的简单罗列。如果读者知道数学分析中的 ϵ − δ \ep…

【Python】PyCharm配置外部工具

QT Designer配置 Designer绘制的UI文件转换成Python文件 1&#xff0c;File->Settings->Tools->External Tools 2,QT Designer配置 Program:...\Python\Python3.10.2\Lib\site-packages\PySide2\designer.exe Arguments:空 Working directory&#xff1a;$Projec…

小程序中display:flex和v-show,v-show不生效,uni-app

小程序中display:flex和v-show&#xff0c;v-show不生效、、 解决方案&#xff1a; display&#xff1a;flex样式的优先级高于了v-show &#xff0c;v-show其实就是display&#xff1a;none&#xff0c;display&#xff1a;flex优先级高于display&#xff1a;none。 使用 :s…