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

vue2-表单组件封装

创建组件

components/test/index.vue

<template><el-form :model="formData">// <!-- 具名插槽 --><slot name="header" /><el-form-itemv-for="(item, index) in formItem":key="index":label="item.label":label-width="labelWith"><template v-if="item.type === 'input'"><el-input v-model="formData[item.field]" /></template><template v-else-if="item.type === 'switch'"><el-switch v-model="formData[item.field]" /></template><template v-else><el-select v-model="formData[item.field]" @change="(e) => issueEvent(e, item.onChange)"><el-optionv-for="opt in item.option":key="opt.value":label="opt.label":value="opt.value"/></el-select></template></el-form-item>// <!-- 具名插槽 --><slot name="footer" /></el-form>
</template><script>
export default {props: {labelWith: {type: String,default: '100px'},formData: {type: Object,default: () => {}},formItem: {type: Array,default: () => []}},created() {console.log(this.formData, 'formData')},methods: {// 重点在issueEvent函数,可以给事件绑定一个空函数避免报错,如果有外部传入的自定义函数则返回这个函数/* 组件内函数负责分发表单项事件 */issueEvent(value, mouseEvent) {if (mouseEvent) {return mouseEvent(value)}}}
}
</script><style lang="scss" scoped></style>

表单项数据配置

export default {formItem: [{type: 'input',label: '颜色',field: 'color'},{type: 'select',label: '选择大小',field: 'size',option: [{ label: 'S', value: '0' },{ label: 'M', value: '1' }],onChange: (val) => { // 传入事件console.log(val, 'val123')}},{type: 'input',label: '爱好',field: 'hobbies'},{type: 'switch',label: '开关',field: 'state'},{type: 'select',label: '选择版本',field: 'version',option: [{ label: '1.1', value: '0' },{ label: '2.1', value: '1' }]}]
}

使用组件

注意:必须把表单项要绑定的数据变成响应式数据,使用 this.$set(object, propertyName, value)

  • object:要添加属性的目标对象。
  • propertyName:要添加的属性的名称。
  • value:要设置的属性值。
<template><MyTest :form-data="formData" :form-item="formItem"><template #header>新增客户</template><template #footer><el-button type="primary" @click="submit">确定</el-button><el-button>取消</el-button></template></MyTest>
</template><script>
import formConfig from '@/config/test/testConfig'
import MyTest from '@/components/test/index.vue'
export default {components: {MyTest},data() {return {formData: {}, // 表单数据formItem: formConfig.formItem ?? [] // ?? 表示空值合并操作符}},created() {this.formItem.forEach((item) => {/*** 使用了 Vue 实例的 $set 方法来确保 formData 对象的属性是响应式的。* $set 方法是 Vue 2 中用来向响应式对象添加一个属性并确保这个新属性同样是响应式的。*/this.$set(this.formData, item.field, item.type === 'switch' ? false : '')})},methods: {submit() {console.log(this.formData, 'formData')}}
}
</script><style lang="scss" scoped></style>

封装 el-select

由于el-select的option数据是异步请求过来的
所以要特殊处理下

表单项数据配置

import { getDepartmentList } from '@/api/department'
// 返回一个Promise,该Promise在解析时返回一个包含formItem的对象
export default async function getFormItem() {const res = await getDepartmentList()const departmentList = res.datareturn ([{type: 'select',label: '部门',field: 'departmentId',option: departmentList.map(department => ({ // 注意:这里假设departmentList是一个数组,并且每个元素都有一个可以显示的属性(比如name)label: department.name, // 根据实际情况修改value: department.id // 根据实际情况修改}))}])
}

使用组件

<template><my-form :form-data="formData" :form-item="formItem" />
</ template>
<script>data() {return {formData: {}, // 表单数据// formItem: commonConfig.formItem ?? [] // ?? 表示空值合并操作符formItem: []}},async created() {this.formItem = await getFormItem()console.log(this.formItem, 'formItem')this.formItem.forEach((item) => {/*** 使用了 Vue 实例的 $set 方法来确保 formData 对象的属性是响应式的。* $set 方法是 Vue 2 中用来向响应式对象添加一个属性并确保这个新属性同样是响应式的。*/this.$set(this.formData, item.field, '')})},
</ script>

相关文章:

vue2-表单组件封装

创建组件 components/test/index.vue <template><el-form :model"formData">// <!-- 具名插槽 --><slot name"header" /><el-form-itemv-for"(item, index) in formItem":key"index":label"item.la…...

智能家居4 -- 添加接收消息的初步处理

这一模块的思路和前面的语言控制模块很相似&#xff0c;差别只是调用TCP 去控制 废话少说&#xff0c;放码过来 增添/修改代码 receive_interface.c #include <pthread.h> #include <mqueue.h> #include <string.h> #include <errno.h> #include <…...

Python selenium

1.搭建环境 1.安装&#xff1a; pip install msedge-selenium-tools 不要使用pip install selenium&#xff0c;我的电脑上没法运行 2.下载驱动 Microsoft Edge WebDriver |Microsoft Edge 开发人员 edge浏览器点设置---关于即可找到版本号&#xff0c;一定要下载对应版…...

Python内置函数next()详解

Python的next()函数是一个内置函数&#xff0c;用于从迭代器中获取下一个元素。如果迭代器耗尽&#xff0c;则抛出StopIteration异常。 函数定义 next()函数的基本语法如下&#xff1a; next(iterator[, default])iterator&#xff1a;一个迭代器对象。default&#xff1a;可…...

初识指针(1)<C语言>

前言 指针是C语言中比较难的一部分&#xff0c;大部分同学对于此部分容易产生“畏难情结”&#xff0c;但是学习好这部分对C语言的深入很大的帮助&#xff0c;所以此篇主要以讲解指针基础为主。 指针概念 变量创建的本质就是在内存中申请空间&#xff0c;找到这个变量就需要地址…...

uniapp使用vconsole调试 兼容App

前言&#xff1a;引入vconsole发现uniapp打出来的包里&#xff0c;看不到vconsole&#xff0c;uniapp开发的h5需要使用vconsole真机调试&#xff0c;如果直接在main.ts引入&#xff0c;打包后整个项目会页面空白&#xff0c;经实验在单个页面引入可解决&#xff0c;以下是解决方…...

论文笔记模版

1. 摘要 1.1 背景 1.2 挑战 1.3 提出新方法 1.4 贡献 2. 引言 2.1 背景&#xff08;引出问题&#xff09; ①介绍大背景&#xff1a; ② 应用场景&#xff1a; ③ 介绍主题&#xff1a; 2.2 引出挑战 一般用图表来展现出我们的挑战&#xff08;直观&#xff0c;解决什…...

docker-本地私有仓库、harbor私有仓库部署与管理

一、本地私有仓库&#xff1a; 1、本地私有仓库简介&#xff1a; docker本地仓库&#xff0c;存放镜像&#xff0c;本地的机器上传和下载&#xff0c;pull/push。 使用私有仓库有许多优点&#xff1a; 节省网络带宽&#xff0c;针对于每个镜像不用每个人都去中央仓库上面去下…...

【Go 语言入门专栏】Go 语言的起源与发展

前言 Go 语言是当下最为流行的编程语言之一&#xff0c;大约在 2020、2021 年左右开始于国内盛行&#xff0c;许多大厂很早就将部分 Java 项目迁移到了 Go&#xff0c;足可看出其在性能方面的优越性。 相信各位都知道&#xff0c;在爬虫业务中&#xff0c;并发是一个关键的需…...

发电机组远程管理,提升管控力,降低运维成本

发电机组是指发电机发动机以及控制系统的总称&#xff0c;用来把发动机提供的动能转化为电能。它通常由动力系统、控制系统、消音系统、减震系统、排气系统组成。发电机组远程管理系统利用物联网技术与PLC远程控制模块集成解决方案&#xff0c;在提高发电机组的运行效率、降低运…...

java将文件压缩打包后进行下载

今天受到一个需求&#xff0c;需要查出文件&#xff0c;然后将文件打包后下载。看了下项目里默认代码有压缩功能&#xff0c;以此修改了下&#xff0c;项目使用了hutool。项目是若依项目 定义zip的数据传输对象&#xff0c;ossId可以是文件表的id Data public class SysOssZi…...

【4/26-4/30】 Arxiv安全类文章速览

4/26 标题: Merchants of Vulnerabilities: How Bug Bounty Programs Benefit Software Vendors 作者: Esther Gal-Or, Muhammad Zia Hydari, Rahul Telang摘要: 软件漏洞允许恶意黑客利用&#xff0c;威胁系统和数据安全。本文研究了激励道德黑客发现并负责任地向软件供应商披…...

活动图与状态图:UML中流程图的精细化表达——专业解析系统动态性与状态变迁

流程图是一种通用的图形表示法&#xff0c;用以展示步骤、决策和循环等流程控制结构。它通常用于描述算法、程序执行流程或业务过程&#xff0c;关注于任务的顺序执行。流程图强调顺序、分支和循环&#xff0c;适用于详细说明具体的处理步骤&#xff0c;图形符号相对基础和通用…...

Easy TCP Analysis提供了四大特性,兼顾了TCP数据包分析入门学习到实战问题排查不同阶段用户对工具的需求

一款兼顾TCP数据包分析入门学习和实战不同阶段用户需求的工具 Easy TCP Analysis是一款在线TCP数据包分析工具&#xff0c;致力于让TCP数据包分析变得跟看聊天记录一样简单&#xff01; Easy TCP Analysis提供了四大特性&#xff0c;兼顾了从入门学习到实战分析不同阶段用户对…...

【2】STM32·FreeRTOS·任务创建和删除

目录 一、任务创建和删除的API函数 1.1、动态创建任务函数 1.2、静态创建任务函数 1.3、任务删除函数 二、任务创建和删除&#xff08;动态方法&#xff09; 三、任务创建和删除&#xff08;静态方法&#xff09; 一、任务创建和删除的API函数 任务的创建和删除本质就是…...

日志审计系统在提高网络安全方面具有哪些重要的作用

随着信息技术的飞速发展&#xff0c;我们正处于一个高度互联、数据驱动的网络时代。在这个时代&#xff0c;日志审计系统作为网络安全和信息管理的重要工具&#xff0c;发挥着至关重要的作用。下面德迅云安全就详细介绍下关于日志审计系统在当今网络时代的重要性。 一、什么是日…...

二维泊松方程(Neumann+Direchliet边界条件)有限元Matlab编程求解|程序源码+说明文本

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现&#xff0c;并提供所有案例完整源码&#xff1b;2.单元…...

13_Scala面向对象编程_伴生对象

文章目录 1.伴生对象1.1 scala的一个性质&#xff0c;scala文件中的类都是公共的&#xff1b;1.2 scala使用object关键字也可以声明对象&#xff1b; 3.关于伴生对象和类4.权限修饰符&#xff0c;scala仅有private;5.伴生对象可以访问伴生类中的私有属性&#xff1b;6.案例7.伴…...

RS485空调系统到BACnet江森楼宇系统的高效整合攻略

智慧城市的每一栋建筑都在追求更高的能效与更佳的居住体验&#xff0c;而这一切的实现离不开强大且灵活的楼宇自动化系统。其中&#xff0c;协议转换网关作为连接不同设备的纽带&#xff0c;扮演着至关重要的角色。本文将以一个典型的商业综合体为例&#xff0c;揭秘BACnet协议…...

Springboot集成Redis操作缓存-06

Redis简介 Redis&#xff08;Remote Dictionary Server&#xff09;&#xff0c;即远程字典服务&#xff0c;是一个开源的、使用ANSI C语言编写的、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 功能特点 数据结构丰富&#…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

ubuntu22.04有线网络无法连接,图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...