当前位置: 首页 > news >正文

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.lryc.cn/news/136403.html

相关文章:

  • Reids 的整合 Spring Data Redis使用
  • 3D数据转换工具HOOPS Exchange概览
  • 【从零开始的rust web开发之路 一】axum学习使用
  • oracle警告日志\跟踪日志磁盘空间清理
  • 【vue】el-table 数据更新后,刷新表格数据
  • AVL——平衡搜索树
  • TCP通信流程以及一些TCP的相关概念
  • PyTorch学习笔记(十七)——完整的模型验证(测试,demo)套路
  • WPF开篇
  • linux 压缩解压缩
  • centos9 mysql8修改数据库的存储路径
  • 【C++】<Windows编程中消息即事件的处理>
  • 数据库SQL语句使用
  • 从零开始 Spring Cloud 12:Sentinel
  • @Resurce和@Autowired的区别
  • ResNet简介
  • 了解单例模式,工厂模式(简单易懂)
  • 【中危】 Apache NiFi 连接 URL 验证绕过漏洞 (CVE-2023-40037)
  • 【Git版本控制工具使用---讲解一】
  • NLP | 基于LLMs的文本分类任务
  • 攻防世界-base÷4
  • 【Java转Go】快速上手学习笔记(三)之基础篇二
  • 【vue 引入pinia与pinia的详细使用】
  • USACO18DEC Fine Dining G
  • fckeditor编辑器的两种使用方法
  • 数据结构,查找算法(二分,分块,哈希)
  • C++(Qt)软件调试---gdb调试入门用法(12)
  • shell和Python 两种方法分别画 iostat的监控图
  • 设计模式(9)建造者模式
  • PHP 创业感悟交流平台系统mysql数据库web结构apache计算机软件工程网页wamp