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

element+vue 之动态form

在这里插入图片描述

1.页面部分

   <div v-for="(item,index) in formList" :key="index"><el-col :span="6" v-if="item.inputType==0"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请输入', trigger: 'change' }"><el-input v-model.trim="detailForm[item.conditionCode]" :placeholder="item.placeHolder"clearable></el-input></el-form-item></el-col><el-col :span="6" v-else-if="item.inputType==1"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message: item.placeHolder?item.placeHolder:'请输入', trigger: 'change' }"><el-input v-model.number="detailForm[item.conditionCode]":placeholder="item.placeHolder" clearable></el-input></el-form-item></el-col><el-col :span="24" v-else-if="item.inputType==2"><el-form-item :label="item.conditionName" :prop="item.conditionCode" :rows="3":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请输入', trigger: 'change' }"><el-input clearable style="width: 100%" v-model.trim="detailForm[item.conditionCode]"autocomplete="off" placeholder="请输入" type="textarea" maxlength="100"></el-input></el-form-item></el-col><el-col :span="24" v-else-if="item.inputType==3"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }"><!-- <el-input v-model="detailForm[item.conditionCode]" v-show="false" /> --><el-upload list-type="picture-card" action="#" :headers="headers" multiple:before-upload="beforeUpload" :http-request="f_upload" :on-remove="handleRemoveUrl":on-preview="handlePictureCardPreview" :file-list="fileImgurl"accept=".jpg,.jpeg,.png,.bmp"><i slot="default" class="el-icon-plus"></i><div class="el-upload__tip" slot="tip">仅支持JPGJPEGPNGBMP格式文件</div></el-upload><el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item></el-col><el-col :span="24" v-else-if="item.inputType==4 && item.singleton==0"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }"><el-checkbox-group v-model="detailForm[item.conditionCode]"><el-col :span="24" v-if="item.optionList"><el-checkbox v-for="(it,ind) in item.optionList" :label="it.name":key="ind"></el-checkbox></el-col></el-checkbox-group></el-form-item></el-col><el-col :span="6" v-else-if="item.inputType==4 && item.singleton==1"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }"><el-radio-group v-model="detailForm[item.conditionCode]"><el-col :span="24" v-if="item.optionList"><el-radio v-for="(it,ind)  in item.optionList" :label="it.name":key="ind">{{it.name}}</el-radio></el-col></el-radio-group></el-form-item></el-col><el-col :span="6" v-else-if="item.inputType==5"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }"><el-select v-model="detailForm[item.conditionCode]" placeholder="请选择"style="width: 100%" v-if="item.optionList":multiple="item.inputType==5 && item.singleton==0"><el-option v-for="(it,ind) in item.optionList" :key="ind" :label="it.name":value="it.name"></el-option></el-select></el-form-item></el-col></div>

2.数据格式

在这里插入图片描述

 "decisionConditionList": [{"conditionCode": "carHygiene",//表单键"conditionName": "车辆卫生",//表单名称"inputType": 5,//表单类型"conditionValueList": ["是"],//表单值"required": 1,//是否必填"singleton": 0,"placeHolder": "请选择","optionList": [{"name": "是","defaultType": 0},{"name": "否","defaultType": null}]},{"conditionCode": "productSpotCheck","conditionName": "是否抽检","inputType": 4,"conditionValueList": ["否"],"required": 1,"singleton": 1,"placeHolder": "请选择","optionList": [{"name": "是","defaultType": 0},{"name": "否","defaultType": 1}]},{"conditionCode": "carPlateNum","conditionName": "车辆号","inputType": 0,"conditionValueList": ["1"],"required": 1,"singleton": null,"placeHolder": "请输入","optionList": null},{"conditionCode": "carPlate","conditionName": "车辆数量","inputType": 1,"conditionValueList": ["1"],"required": 0,"singleton": null,"placeHolder": "请输入","optionList": null},{"conditionCode": "problemDesc","conditionName": "问题类型","inputType": 4,"conditionValueList": ["问题一"],"required": 1,"singleton": 0,"placeHolder": "请选择","optionList": [{"name": "问题一","defaultType": 0},{"name": "问题二","defaultType": 0},{"name": "问题三","defaultType": 0},{"name": "问题四","defaultType": 0}]},{"conditionCode": "imgUrl","conditionName": "图片","inputType": 3,"conditionValueList": ["https://warehouse-permanent.obs.cn-east-3.myhuaweicloud.com/74cc681c-fe39-429c-886e-8e086378c2ef.png","https://warehouse-permanent.obs.cn-east-3.myhuaweicloud.com/5b312d59-8c40-431b-ad99-ac908bbb7707.png"],"required": 1,"singleton": null,"placeHolder": "请选择","optionList": null},{"conditionCode": "remarkTwo","conditionName": "备注","inputType": 2,"conditionValueList": ["1"],"required": 0,"singleton": null,"placeHolder": "1","optionList": null}],

3.数据处理 因为后端给的数据都是数组 表单有些需要数组有些需要字符串

 this.formList = res.data.data.decisionConditionList;if (this.formList) {this.formList.forEach(a => {if (a.inputType == 4 && a.singleton == 0 || a.inputType == 5 && a.singleton == 0) {this.$set(this.detailForm, a.conditionCode, a.conditionValueList ? a.conditionValueList : [])} else if (a.inputType == 3) {var fileImgurl = []if (a.conditionValueList) {a.conditionValueList.forEach((item, index) => {fileImgurl.push(Object.assign({}, { url: item }))})this.fileImgurl=fileImgurl}this.$set(this.detailForm, a.conditionCode, a.conditionValueList ? a.conditionValueList : [])}else {this.$set(this.detailForm, a.conditionCode, a.conditionValueList ? a.conditionValueList.toString() : '')}})}

4.关于图片部分的js

  // 上传之前beforeUpload(file) {if (!this.checkFileType(file)) {return false}this.$forceUpdate()},// 效验文件类型checkFileType(file) {let allowTypesSet = new Set(["jpg", "jpeg", "png", "bmp", "pdf"])let fileType = file.name.replace(/.+\./, "")if (!allowTypesSet.has(fileType)) {this.$message({type: "warning",message: "不支持该文件类型"})return false}return true},//预览图片handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},//删除图片handleRemoveUrl(file, fileList) {if (fileList.length) {this.fileImgurl.filter((item, index) => {if (item.url == file.url) {this.fileImgurl.splice(index, 1);}});let results = this.fileImgurl.map(n => n.url);this.formList.forEach(index => {if (index.inputType == 3) {this.$set(this.detailForm, index.conditionCode, results)}})} else {this.formList.forEach(index => {if (index.inputType == 3) {this.$set(this.detailForm, index.conditionCode, [])}})this.fileImgurl = []}},// 导入f_upload(data) {const formData = new FormData()formData.append("file", data.file)this.handlefileUpload(formData)},//上传方法handlefileUpload(formData) {fileUpload(formData).then((res) => {const { code, msg } = res.dataif (code == 200) {this.formList.forEach(a => {if (a.inputType == 3) {var arr = a.conditionValueList ? a.conditionValueList : [];arr.push(res.data.data)this.$set(this.detailForm, a.conditionCode, arr)}})this.fileImgurl.push({ url: res.data.data })} else {const title = "操作失败"const type = "error"this.$notification(title, type, msg)}}).catch(() => { })},

4.提交

//提交这里还是要按照上面的格式提交

 this.formList.forEach((item, index) => {this.detailForm.decisionConditionList.push(Object.assign({},item, { conditionValueList: item.inputType == 4 && item.singleton == 0 || item.inputType == 5 && item.singleton == 0 || item.inputType == 3 ? this.detailForm[item.conditionCode] : [this.detailForm[item.conditionCode]] }))})

相关文章:

element+vue 之动态form

1.页面部分 <div v-for"(item,index) in formList" :key"index"><el-col :span"6" v-if"item.inputType0"><el-form-item :label"item.conditionName" :prop"item.conditionCode":rules"{req…...

winform学习(3)-----Windows窗体应用和Windows窗体应用(.Net Framework)有啥区别?

1.模板选择 在学习winform的时候总是会对这两个应用不知道选择哪个&#xff1f;而且在学习的时候也没有具体的说明 首先说一下我是在添加控件的时候出现了以下问题 对于使用了Windows窗体应用这个模板的文件在工具箱中死活不见控件。 在转换使用了Windows窗体应用(.NET Fram…...

虚拟化中的中断机制:X86与PIC 8259A探索(上)

本系列深入探讨虚拟化中断技术&#xff0c;从X86架构和PIC 8259A的基础&#xff0c;到IOAPIC和MSI的编程&#xff0c;再到MSIX技术与Broiler设备的实战应用&#xff0c;全面剖析中断虚拟化的前沿进展。 X86 中断机制 ​ 在计算机架构中&#xff0c;CPU 运行的速度远远大于外设…...

软件外包开发语言排行榜

软件开发语言的排行榜是一个动态的话题&#xff0c;而在未来的几年中&#xff0c;新的技术和语言可能会不断涌现&#xff0c;影响排名。然而以下是一些在过去几年中一直受欢迎并有前途的软件开发语言&#xff0c;如果是新入门软件开发行业在学习语言做选择&#xff0c;希望下面…...

BI技巧丨利用OFFSET计算同环比

微软最近更新了很多开窗函数&#xff0c;其内部参数对比以往的DAX函数来说&#xff0c;多了很多&#xff0c;这就导致学习的时间成本直线上升。 而且对于新增函数的应用场景&#xff0c;很多小伙伴也是一知半解的&#xff0c;本期我们就来聊一聊关于最近新增的开窗函数——OFF…...

整理mongodb文档:collation

文章连接 整理mongodb文档:collation 看前提示 对于mongodb的collation。个人主要用的范围是在createcollection&#xff0c;以及find的时候用&#xff0c;所以本片介绍的时候也是这两个地方入手&#xff0c;对新手个人觉得理解概念就好。不要求强制性掌握&#xff0c;但是要…...

【LangChain】Prompts之Prompt templates

Prompts 编程模型的新方法是通过提示(prompts)。 prompts是指模型的输入。该输入通常由多个组件构成。 LangChain 提供了多个类和函数&#xff0c;使构建和使用prompts变得容易。 Prompt templates(提示模板): 参数化模型输入Example selectors(选择器示例): 动态选择要包含在…...

【数字IC基础】时序违例的修复

时序违例的修复 建立时间违例保持时间违例Buffer 插入位置参考资料 建立时间违例 基本思路是减少数据线的延时、减少 Launch clock line 的延时、增加capture clock line的delay 加强约束&#xff0c;重新进行综合&#xff0c;对违规的路径进行进一步的优化&#xff0c;但是一…...

深度学习实战46-基于CNN的遥感卫星地图智能分类,模型训练与预测

大家好,我是微学AI,今天给大家介绍一下深度学习实战46-基于CNN的遥感卫星地图智能分类,模型训练与预测。随着遥感技术和卫星图像获取能力的快速发展,卫星图像分类任务成为了计算机视觉研究中一个重要的挑战。为了促进这一领域的研究进展,EuroSAT数据集应运而生。本文将详细…...

Node.js-fs模块文件创建、删除、重命名、文件内容的写入、读取以及文件夹的相关操作

一、写入文件操作 异步写入&#xff1a;writeFile() 同步写入&#xff1a;writeFileSync() const fs require("fs"); fs.writeFile("目标文件路径", "要写入的内容", err > {if(err){console.log(err);return;}console.log("写入成功&a…...

LIN协议总结

目录 一、LIN是什么1、LIN的概念2、扩展介绍一下同步通信和异步通信的区别3、LIN连接结构及节点构成 二、LIN的特点三、LIN协议层1、帧的结构2、帧的类型3、进度表4、状态机实现5、网络管理6、状态管理 四、帧收发的硬件实现1、组成2、硬件特点3、协议控制器4、总线收发器5、LI…...

Redis BigKey案例

面试题&#xff1a; 阿里广告平台&#xff0c;海量数据里查询某一固定前缀的key小红书&#xff0c;你如何生产上限制keys*/flushdb/flushall等危险命令以防止误删误用&#xff1f;美团&#xff0c;MEMORY USAGE命令你用过吗&#xff1f;BigKey问题&#xff0c;多大算big&#…...

ThinkPHP v6.0.8 CacheStore 反序列化漏洞

漏洞说明 1. 漏洞原理&#xff1a;ThinkPHP 6.0.8 CacheStore 会触发POP利用链子&#xff0c;造成任意命令执行 2. 组件描述&#xff1a; ThinkPHP是一个免费开源的&#xff0c;快速、简单的面向对象的轻量级PHP开发框架 3. 影响版本&#xff1a;V6.0.8 漏洞复现 1. 环境安…...

Spring 事务详解(注解方式)

目 录 序言 1、编程式事务 2、配置声明式事务 2.1 基于TransactionProxyFactoryBean的方式&#xff08;不常用&#xff0c;因为要为每一个类配置TransactionProxyFactoryBean&#xff09; 2.2 基于AspectJ的XML方式&#xff08;常用&#xff0c;可配置在某些类下的所有子…...

华为云waf 使用场景

防护Web应用免受攻击就用华为云Web应用防火墙 Web应用防火墙&#xff08;Web Application Firewall&#xff0c; WAF&#xff09;&#xff0c;通过对HTTP(S)请求进行检测&#xff0c;识别并阻断SQL注入、跨站脚本攻击、网页木马上传、命令/代码注入、文件包含、敏感文件访问、第…...

?.的写法 后缀修饰符

概览&#xff1a;处理后端返回的数据data&#xff0c;写法&#xff1a;data?.name。解决vue框架编译出现的报错Cannot read property name of undefined。出现问题的原因&#xff1a;这是因为我们试图访问对象中不在的 key 为 name 的属性&#xff0c;那么怎么解决呢&#xff…...

org.apache.hadoop.hive.ql.exec.DDLTask. show Locks LockManager not specified解决

Error while processing statement: FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. show Locks LockManager not specified解决 当在Hive中执行show locks语句时&#xff0c;出现"LockManager not specified"错误通常是由于…...

Adaptive autosar 都有哪些模块?各有什么功能?

Adaptive autosar是一种用于高性能计算ECU的软件平台,它支持自适应应用程序的开发和运行。它由两部分组成:基础(Foundation)和服务(Service)。基础包括了操作系统接口、执行管理、网络管理、识别访问管理、加密、更新和配置管理等功能。服务包括了通信管理、RESTful、时间…...

C++ 动态内存分配

在C中动态内存的分配技术可以保证程序在允许过程中按照实际需要申请适量的内存&#xff0c;使用结束后还可以释放&#xff0c;这种在程序运行过程中申请和释放的存储单元也称为堆。 申请和释放过程一般称为建立和删除。 在C程序中&#xff0c;建立和删除堆对象使用两个运算符&…...

设计模式——面向对象的7大设计原则

1.单一职责原则 一个类中最好只放一种类型的方法&#xff0c;比如Dao中只有和数据库交互相关的代码。实现高内聚&#xff0c;低耦合。 2.开闭原则 对外拓展开放&#xff0c;对内修改关闭&#xff0c;有新的需求时不要修改已有代码&#xff0c;而是添加新的代码&#xff0c;比…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...