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

ops/2024/11/14 19:52:05/

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

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

javascript"> 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> 标签动态渲染不同的表单组件,增强了灵活性。


http://www.ppmy.cn/ops/133668.html

相关文章

Big Data for AI实践:面向AI大模型开发和应用的大规模数据处理套件

作者&#xff1a;夕陌&#xff0c;临在&#xff0c;熊兮&#xff0c;道辕&#xff0c;得水&#xff0c;施晨 随着人工智能技术的快速发展&#xff0c;大模型在各个领域的应用日益广泛。大模型能够更好地模拟人类的认知能力&#xff0c;大幅提升机器在复杂任务上的表现。然而&am…

MySQL数据库:SQL语言入门 【下】(学习笔记)

5&#xff0c;TCL —— 事务控制语言&#xff08;Transaction Control Language&#xff09; 用于数据库的事务管理。 &#xff08;1&#xff09;事务的概念作用 事务&#xff08;Transaction&#xff09;指的是一个操作序列&#xff0c;该操作序列中的多个操作要么都做&#…

CAN通讯演示(U90-M24DR)

概述 CAN通讯一般用的不多&#xff0c;相比于Modbus通讯不是特别常见&#xff0c;但也会用到&#xff0c;下面介绍一下CAN通讯&#xff0c;主要用U90军用PLC演示一下具体的数据传输过程。想更具体的了解的话&#xff0c;可以自行上网学习&#xff0c;此处大致介绍演示。…

大语言模型理论基础

文章目录 前言大语言模型必需知识概述大语言模型目标模型上下文神经网络的神经元常见激活函数SigmoidTanhRelusoftmax 通用近似定理多层感知机&#xff08;MLP&#xff09;拟合最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;我们接下来对大语言模型一探究竟&#xff0c;…

探索 Seata 分布式事务

Seata(Simple Extensible Autonomous Transaction Architecture)是阿里巴巴开源的一款分布式事务解决方案,旨在帮助开发者解决微服务架构下的分布式事务问题。它提供了高效且易于使用的分布式事务管理能力,支持多种事务模式,确保数据的一致性和完整性。 以下是 Seata 的一…

渗透利器-kali工具 (第三章-5) sqlmap之sql注入一、二

一&#xff1a;常见的注入方式 1.sqlmap用于Access数据库注入 2.sqlmap用于Cookie注入  --cookie 3.sqlmap用于Post注入  --froms 、--data、抓包 4.sqlmap用于mysql注入 绕过waf脚本测试&#xff1a;--tamper "space2morehash.py" 常见sqlmap使用方法&#xff1…

基于大语言模型意图识别和实体提取功能;具体ZK数值例子:加密货币交易验证;

目录 基于大语言模型意图识别和实体提取功能 案例背景 零知识证明过程 具体例子 具体举例(简化) 具体ZK数值例子:加密货币交易验证 定义多项式 承诺 挑战 证明构造 证明验证 结论 zkLLM Zero Knowledge Proofs for Large Language Models 在大模型验证过程中处…

Android 13.0 framework系统修改安兔兔等显示的屏幕尺寸大小功能实现

1.前言 在13.0的系统rom定制化开发中,在使用第三方app检测系统的一些信息中,比如安兔兔 设备信息等检测app中,有时候显示的屏幕尺寸大小和 产品规格书等信息不同,稍微有些差异,所以就需要看下系统framework层中,相关的设备信息是怎么读出来的,然后做些调整 接下来就来分…