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

vue2使用 <component> 标签动态渲染不同的表单组件

      在后台管理系统中,涉及到大量表单信息的修改和新增。现在想对模板中代码做一些简单的优化。

1. 使用 v-for 循环简化表单项

可以将表单项的定义提取到一个数组中,然后使用 v-for 循环来生成这些表单项。这将减少重复代码,提高可维护性。

2. 统一样式和属性

如果多个表单项使用相同的样式或属性,可以考虑将这些样式和属性提取到一个对象中,以便于管理。

3. 使用计算属性

对于一些简单的逻辑,比如根据 editForm.type 显示不同的文本,可以使用计算属性来简化模板中的逻辑。

原代码

        <el-formref="editForm":model="editForm":rules="rules":inline="true"label-width="115px"size="small"><el-form-item :size="size" label="投放物料:" prop="materialName"><el-inputv-model="editForm.materialName"class="editItem"placeholder="请选择"readonlystyle="width: 300px"><el-buttonslot="append"icon="el-icon-search"@click="selectMaterial"></el-button></el-input></el-form-item><el-form-item :size="size" label="物料单位:" prop="unitName"><el-inputv-model="editForm.unitName"class="editItem"readonlystyle="width: 100px"></el-input></el-form-item><el-form-item :size="size" label="物料批号:" prop="batchNumber"><el-input v-model="editForm.batchNumber" class="editItem" readonly></el-input></el-form-item><el-form-item :size="size" label="投放数量:" prop="quantity"><el-input-numberv-model="editForm.quantity":precision="4":step="1":min="0"class="editItem"></el-input-number></el-form-item><el-form-item :size="size" label="投放时间:" prop="feedingTime"><el-date-pickerv-model="editForm.feedingTime"type="datetime"placeholder="选择投放时间"default-time="12:00:00"value-format="yyyy-MM-dd HH:mm:ss"class="editItem"></el-date-picker></el-form-item><el-form-item :size="size" label="投放类型:" prop="type"><el-selectdisabledv-model="editForm.type"placeholder="请选择"class="editItem"><el-optionv-for="item in typeOption":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item :size="size" label="流转单号:" prop="circulationNo"><el-inputv-model="editForm.circulationNo"style="width: 225px"placeholder="请选择"readonly><el-buttonslot="append"icon="el-icon-search"@click="selectCirculation"></el-button></el-input></el-form-item><el-form-item :size="size" label="产品编码:"><el-input v-model="editForm.code" readonly style="width: 225px"></el-input></el-form-item><el-form-item :size="size" label="产品图号:"><el-inputv-model="editForm.drawingNumber"readonlystyle="width: 150px"></el-input></el-form-item><el-form-item :size="size" label="产品型号:"><el-input v-model="editForm.model" class="editItem" readonly></el-input></el-form-item><el-form-item :size="size" label="产品规格:"><el-inputv-model="editForm.specifications"class="editItem"readonly></el-input></el-form-item><el-form-item :size="size" label="产品尺寸:"><el-input v-model="editForm.size" class="editItem" readonly></el-input></el-form-item><el-form-item label="备注:" prop="remark"><el-inputv-model="editForm.remark"type="textarea"placeholder="请输入备注"style="width: 850px"/></el-form-item><div style="clear: both"></div></el-form>

更改后

<el-formref="editForm":model="editForm":rules="rules":inline="true"label-width="115px"size="small"><el-form-itemv-for="(item, index) in formItems":key="index":size="size":label="item.label":prop="item.prop"><component:is="item.component"v-model="editForm[item.prop]"v-bind="item.attrs"class="editItem"><template v-if="item.component === 'el-input'" #append><el-buttonv-if="item.isSearch"icon="el-icon-search"@click="item.searchMethod"></el-button></template></component></el-form-item><el-form-item label="备注:" prop="remark"><el-inputv-model="editForm.remark"type="textarea"placeholder="请输入备注"style="width: 850px"/></el-form-item><div style="clear: both"></div></el-form>

js

 data() {return {size: "small",vis: false,formItems: [{label: "投放物料:",prop: "materialName",component: "el-input",attrs: {placeholder: "请选择",readonly: true,style: { width: "300px" },},isSearch: true,searchMethod: this.selectMaterial,},{label: "物料单位:",prop: "unitName",component: "el-input",attrs: {readonly: true,style: { width: "100px" },},},{label: "物料批号:",prop: "batchNumber",component: "el-input",attrs: {readonly: true,},},{label: "投放数量:",prop: "quantity",component: "el-input-number",attrs: {precision: 4,step: 1,min: 0,},},{label: "投放时间:",prop: "feedingTime",component: "el-date-picker",attrs: {type: "datetime",placeholder: "选择投放时间",defaultTime: "12:00:00",valueFormat: "yyyy-MM-dd HH:mm:ss",},},{label: "投放类型:",prop: "type",component: "el-select",attrs: {disabled: true,placeholder: "请选择",},},{label: "流转单号:",prop: "circulationNo",component: "el-input",attrs: {placeholder: "请选择",readonly: true,style: { width: "225px" },},isSearch: true,searchMethod: this.selectCirculation,},{label: "产品编码:",prop: "code",component: "el-input",attrs: {readonly: true,style: { width: "225px" },},},{label: "产品图号:",prop: "drawingNumber",component: "el-input",attrs: {readonly: true,style: { width: "150px" },},},{label: "产品型号:",prop: "model",component: "el-input",attrs: {readonly: true,},},{label: "产品规格:",prop: "specifications",component: "el-input",attrs: {readonly: true,},},{label: "产品尺寸:",prop: "size",component: "el-input",attrs: {readonly: true,},},],descriptionItems: [],};},
  1. 表单项数组:通过 formItems 数组定义表单项,使用 v-for 循环生成表单项,减少了重复代码。
  2. 组件动态渲染:使用 <component> 标签动态渲染不同的表单组件,增强了灵活性。

相关文章:

vue2使用 <component> 标签动态渲染不同的表单组件

在后台管理系统中&#xff0c;涉及到大量表单信息的修改和新增。现在想对模板中代码做一些简单的优化。 1. 使用 v-for 循环简化表单项 可以将表单项的定义提取到一个数组中&#xff0c;然后使用 v-for 循环来生成这些表单项。这将减少重复代码&#xff0c;提高可维护性。 2…...

C#实现在windows上实现指定句柄窗口的指定窗口坐标点击鼠标左键和右键的详细情况

在Windows编程中&#xff0c;有时我们需要对特定窗口进行操作&#xff0c;比如模拟鼠标点击。这在自动化测试、脚本编写或某些特定应用程序的开发中尤为常见。本文将深入探讨如何在C#中实现对指定句柄窗口进行鼠标点击操作&#xff0c;包括左键和右键点击。我们会从理论背景开始…...

探索Python自动化新境界:Invoke库的神秘面纱

文章目录 **探索Python自动化新境界&#xff1a;Invoke库的神秘面纱**第一部分&#xff1a;背景介绍第二部分&#xff1a;Invoke库是什么&#xff1f;第三部分&#xff1a;如何安装Invoke库&#xff1f;第四部分&#xff1a;Invoke库函数使用方法1. 定义任务2. 执行任务3. 任务…...

CSS样式实现3D效果

CSS 3D效果是通过CSS3中的transform和perspective等属性来实现的。这些属性允许你创建具有深度感和三维外观的网页元素。以下是一些常见的CSS 3D效果及其实现方法&#xff1a; 1. 3D旋转&#xff08;Rotate&#xff09; 使用transform: rotateX(), rotateY(), rotateZ()来分别…...

华为eNSP:MSTP

一、什么是MSTP&#xff1f; 1、MSTP是IEEE 802.1S中定义的生成树协议&#xff0c;MSTP兼容STP和RSTP&#xff0c;既可以快速收敛&#xff0c;也提供了数据转发的多个冗余路径&#xff0c;在数据转发过程中实现VLAN数据的负载均衡。 2、MSTP可以将一个或多个VLAN映射到一个Inst…...

modbus协议 Mthings模拟器使用

进制转换 HEX 16进制 (0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F表示0-15) dec 10进制 n(16进制) -> 10 abcd.efg(n) d*n^0 c*n^1 b*n^2 a*n^3 e*n^-1 f*n^-2 g*n^-3&#xff08;10&#xff09; 10 -> n(16进制) Modbus基础概念 高位为NUM_H&…...

内网安全-代理技术-socket协议

小迪安全网络架构图&#xff1a; 背景&#xff1a;当前获取window7 出网主机的shell。 1.使用msf上线&#xff0c;查看路由 run autoroute -p 添加路由&#xff1a; run post/multi/manage/autoroute 使用socks模块开启节点&#xff0c;作为流量跳板 msf6 exploit(multi/ha…...

选择排序(C语言)

一、步骤 选择排序的基本思想&#xff1a;每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的数据元素排完 。 1.首先&#xff0c;我们先建立一个乱序数组&#xff0c;如&#xff1…...

✍Qt自定义带图标按钮

✍Qt自定义带图标按钮 &#x1f4dd;问题引入 近段时间的工作中&#xff0c;有遇到这样一个需求 &#x1f4dd;&#xff1a; 一个按钮&#xff0c;有normal、hover、pressed三种状态的样式&#xff0c;并且normal和hover样式下&#xff0c;字体颜色和按钮图标不一样。 分析…...

【Git】如何在 Git 项目中引用另一个 Git 项目:子模块与子树合并

如何在 Git 项目中引用另一个 Git 项目&#xff1a;子模块与子树合并 在进行软件开发时&#xff0c;我们经常会遇到需要将一个 Git 项目&#xff08;B 项目&#xff09;引用到另一个 Git 项目&#xff08;A 项目&#xff09;的情况。这种需求通常出现在以下场景&#xff1a; …...

webstorm 打开prettier的项目代码后面会出现红色的波浪线

效果如图所有代码后面都有红色的波浪线。 解决File-Settings 找到Editor下面的inspections ...按照图示取消勾选ESLint再点Apply ok...

用 Python 从零开始创建神经网络(二):第一个神经元的进阶

第一个神经元的进阶 引言1. Tensors, Arrays and Vectors&#xff1a;2. Dot Product and Vector Additiona. Dot Product &#xff08;点积&#xff09;b. Vector Addition &#xff08;向量加法&#xff09; 3. A Single Neuron with NumPy4. A Layer of Neurons with NumPy5…...

一、文心一言问答系统为什么要分对话,是否回学习上下文?二、文心一言是知识检索还是大模型检索?三、文心一言的词向量、词语种类及多头数量

目录 一、文心一言问答系统为什么要分对话,是否回学习上下文? 二、文心一言是知识检索还是大模型检索? 三、文心一言的词向量、词语种类及多头数量 一、文心一言问答系统为什么要分对话,是否回学习上下文? 文心一言问答系统分对话的原因在于其设计初衷就是提供一个交互…...

C++ 的协程

现代C中的协程&#xff08;coroutines&#xff09;是C20引入的一项重大语言特性&#xff0c;它们允许函数在执行过程中可以暂停并稍后从暂停点恢复执行。协程提供了一种控制流机制&#xff0c;使得函数可以包含多个入口点和出口点&#xff0c;这与传统的单入口、单出口的函数模…...

D3的竞品有哪些,D3的优势,D3和echarts的对比

D3 的竞品 ECharts: 简介: ECharts 是由百度公司开发的一款开源的 JavaScript 图表库&#xff0c;提供了丰富的图表类型和高度定制化的配置选项。特点: 易于使用&#xff0c;文档详尽&#xff0c;社区活跃&#xff0c;支持多种图表类型&#xff08;如折线图、柱状图、饼图、散点…...

大厂计算机网络高频八股文面试题及参考答案(面试必问,持续更新)

目录 请简述 TCP 和 UDP 的区别? TCP 和 UDP 分别对应的常见应用层协议有哪些? UDP 的优缺点是什么?它适用于哪些场景? UDP 如何实现可靠传输? 请简述 HTTP 和 HTTPS 的区别? HTTP 协议的工作原理是什么? HTTP 状态码有哪些常见的类型及其含义? HTTP 哪些常用的…...

【bayes-Transformer-GRU多维时序预测】多变量输入模型。matlab代码,2023b及其以上

% 1. 数据准备 X_train 训练数据输入; Y_train 训练数据输出; X_test 测试数据输入; % 2. 模型构建 inputSize size(X_train, 2); numHiddenUnits 100; numResponses 1; layers [ … sequenceInputLayer(inputSize) biLSTMLayer(numHiddenUnits, ‘OutputMode’, ‘se…...

动手学深度学习69 BERT预训练

1. BERT 3亿参数 30亿个词 在输入和loss上有创新 两个句子拼起来放到encoder–句子对 cls-class分类 sep-seperate 分隔符 分开每个句子 告诉是哪个句子 两个句子给不同的向量 位置编码不用sin cos&#xff0c; 让网络自己学习 bert–通用任务 encoder 是双向的&#xff0c;…...

【2024软考架构案例题】你知道 Es 的几种分词器吗?Standard、Simple、WhiteSpace、Keyword 四种分词器你知道吗?

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…...

Elman 神经网络 MATLAB 函数详解

Elman 神经网络 MATLAB 函数详解 一、引言 Elman 神经网络是一种在时间序列分析和动态系统建模领域广泛应用的递归神经网络&#xff08;RNN&#xff09;。MATLAB 提供了一系列强大的函数来创建、训练和应用 Elman 神经网络&#xff0c;使得用户能够方便地利用其处理具有时间序…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...