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

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

          <el-table:data="form.tableDataA"borderstripestyle="width: 100%; margin-top: 20px"><el-table-columnv-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-inputv-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-inputv-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-inputv-model="category.children[scope.$index].gap":maxlength="30"show-word-limit/></template></el-table-column></el-table-column></el-table>form: {projectId: "", // 项目idtime: "", // 日期producerId: "", // 制定人tableDataA: [{name: "销售额(万元)",children: [{goal: "222",prejudge: "",gap: "",},],},{name: "销售回款(万元)",children: [{goal: "111",prejudge: "",gap: "",},],},{name: "新增入住人数",children: [{goal: "333",prejudge: "",gap: "",},],},], // AtableDataB: [], // BtableDataC: [], // CtableDataD: [], // DtableDataE: [], // EtableDataF: [], // F},

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

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

相关文章

移动端的帮助中心该如何设计?

随着移动互联网的发展&#xff0c;APP作为一种高效的营销工具&#xff0c;已经成为企业抢占移动端流量的重要手段。同时随着智能手机用户规模不断扩大&#xff0c;以及用户的消费逐渐向移动端转移&#xff0c;使得越来越多企业认识到 APP与其营销模式是成为互补的关系&#xf…

Flink内核源码解析--Flink中重要的工作组件和机制

Flink内核源码 1、掌握Flink应用程序抽象2、掌握Flink核心组件整体架构抽象3、掌握Flink Job三种运行模式4、理解Flink RPC网络通信框架Akka详解5、理解TaskManager为例子&#xff0c;分析Flink封装Akka Actor的方法和整个调用流程6、理解Flink高可用服务HighAvailabilityServ…

深入理解python虚拟机:程序执行的载体——栈帧

栈帧&#xff08;Stack Frame&#xff09;是 Python 虚拟机中程序执行的载体之一&#xff0c;也是 Python 中的一种执行上下文。每当 Python 执行一个函数或方法时&#xff0c;都会创建一个栈帧来表示当前的函数调用&#xff0c;并将其压入一个称为调用栈&#xff08;Call Stac…

typescript 声明文件

作用 1、为已存在js库提供类型信息&#xff0c;这样在ts项目中使用这些库时候&#xff0c;就像用ts一样&#xff0c;会有代码提示、类型保护等机制 2、项目内共享类型&#xff1a;如果多个.ts文件中都用到同一个类型&#xff0c;此时可以创建.d.ts文件提供该类型&#xff0c;…

web文件上传

文件上传指的是&#xff0c;将本地的图片、视频、音频上传到服务器&#xff0c;提供给其他用户浏览和下载的过程 前端需求 想要进行文件上传对于web前端来说有三个重要要素 1.<input type"file" name"image"> 提供这样的file文件上传格式 2. metho…

定位服务器CPU爆满的具体原因

1、查询CPU消耗的进程 使用top命令查看系统的CPU和内存使用情况 CPU一列是线程占用百分比 2、具体查看某个占分比大的进程 以为PId:7355为例&#xff0c; 执行top -Hp 7355&#xff0c;线程按照CPU使用率排序。 3、将线程PID转化为16进制 执行printf %x 7391&#xff0c;将…

Kubernetes 使用 Rancher 管理

K8S集群管理工具 只能管理单个K8S集群 kubectl命令行管理工具 dashboard&#xff08;K8S官方的UI界面图形化管理工具&#xff09; &#xff08;管理多集群很麻烦&#xff0c;切换不同集群每次需要更改kube-config文件[kubectl配置文件]&#xff0c;如果kubeadm部署每次都需…

k8s 认证和权限控制

k8s 的认证机制是啥&#xff1f; 说到 k8s 的认证机制&#xff0c;其实之前咋那么也有提到过 ServiceAccouont &#xff0c;以及相应的 token &#xff0c;证书 crt&#xff0c;和基于 HTTP 的认证等等 k8s 会使用如上几种方式来获取客户端身份信息&#xff0c;不限于上面几种…

Segment Anything论文阅读笔记

Segment Anything论文阅读笔记 1. Segment Anything论文基本信息2. Segment Anything论文阅读2.1 第一遍阅读 Segment Anything2.2. 第二遍阅读 Segment Anything2.2.1. Segment Anything中相关的图表 1. Segment Anything论文基本信息 论文地址https://arxiv.org/abs/2304.02…

构建高可用的去中心化微服务集群架构指南

随着云计算、大数据和物联网的快速发展&#xff0c;企业对于可扩展的、高性能的微服务架构的需求也日益增长。传统的集中式架构已经不能满足这些需求&#xff0c;因此出现了去中心化的微服务集群架构。本文将介绍如何构建高可用的去中心化微服务集群架构&#xff0c;以满足企业…

虚幻官方项目《CropOut》技术解析 之 程序化岛屿生成器(IslandGenerator)

开个新坑详细分析一下虚幻官方发布的《CropOut》&#xff0c;文章会同步发布到我在知乎|CSDN的专栏里 文章目录 概要Create Island几何体生成部分随机种子Step 1Step 2Step 3Step 4Step 5Step 6 岛屿材质部分动态为草地设置颜色 程序设计的小技巧其它Platform Switch函数 概要 …

pdf格式文件下载不预览,云存储的跨域解决

需求背景 后端接口中返回的是pdf文件路径比如&#xff1a; pdf文件路径 &#xff08;https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf&#xff09; 前端适配是这样的 <ahref"https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf&…