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

vue3二次封装element-puls

将表单的通用信息给设置出来

如: label 的提示信息 , type 的类型

// 定义表单的配置项

const formConfig={

formItems:[

{

type:"input",

label:"用户ID",

placeholder:"请输入用户ID"

}

]

}

页面配置如

<template v-for="(item,index) in formConfig.formItems" :key="index">

<el-form-item :label="item.label">

<el-input :placeholder="item.placeholder" />

</el-form-item>

</template>


 

如果定义// 定义表单的配置项

const formConfig={

formItems:[

{

type:"input",

label:"用户ID",

placeholder:"请输入用户ID"

},

{

type:"input",

label:"用户名称",

placeholder:"请输入用户名称"

}

]

}

页面就会出现两个一样的输入框,并且里面的渲染不同

<template><el-form style="max-width: 600px"><template v-for="(item, index) in formConfig.formItems" :key="index"><el-form-item :label="item.label"><!-- v-if="item.type === 'input'" 根据类型判断是下拉框还是输入框  --><!-- 输入框 --><template v-if="item.type === 'input'"><el-input :placeholder="item.placeholder" /></template><!-- 下拉框 --><template v-else-if="item.type === 'select'"><el-select :placeholder="item.placeholder"><el-optionv-for="option in item.options":key="option.value":label="option.label":value="option.value"/></el-select></template></el-form-item></template></el-form>
</template>
<script lang="ts" setup>
import { reactive } from "vue";//    定义表单的配置项
const formConfig = {formItems: [{type: "input",label: "用户ID",placeholder: "请输入用户ID",},{type: "select",label: "下拉框1",placeholder: "请选择内容",options: [{label: "禁用",value: 0,},{label: "启用",value: 1,},],},{type: "input",label: "用户名称",placeholder: "请输入用户名称",},{type: "select",label: "下拉框1",placeholder: "请选择内容",options: [{label: "禁用",value: 0,},{label: "启用",value: 1,},],},],
};
</script>
<style lang="scss" scoped></style>

相关文章:

vue3二次封装element-puls

将表单的通用信息给设置出来 如: label 的提示信息 , type 的类型 // 定义表单的配置项 const formConfig{ formItems:[ { type:"input", label:"用户ID", placeholder:"请输入用户ID" } ] } 页面配置如 <template v-for"(it…...

在CentOS 7上安装Apache Tomcat 8的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 介绍 Apache Tomcat 是一个用于提供 Java 应用程序的 Web 服务器和 Servlet 容器。Tomcat 是由 Apache 软件基金会发布的 Java Servlet…...

深入理解分布式事务中的三阶段提交(3PC),什么是3PC,3PC原理是怎样?3PC的优化?

在上一篇文章中&#xff0c;我们详细介绍了分布式事务中的两阶段提交&#xff0c;以及知道了两阶段提交存在一定的问题 深入理解分布式事务中的两阶段提交&#xff08;2PC&#xff09;&#xff0c;什么是2PC&#xff0c;2PC原理是怎样&#xff1f;2PC有没有什么问题&#xff1…...

这款新的 AI 工具会消灭 ChatGPT 吗?

随着大型语言模型 (LLM) 的出现&#xff0c;ChatGPT迅速成为全球计算机用户的家喻户晓的名字。这款由 OpenAI 设计的深度学习聊天机器人以知识宝库而闻名——一部互联网百科全书。 继ChatGPT的脚步之后&#xff0c;许多其他生成式AI工具也纷纷涌现。 2023 年 3 月&#xff0c;一…...

谷粒商城实战笔记-214~219-商城业务-认证服务-验证码防刷校验

文章目录 一&#xff0c;验证码防刷校验1&#xff0c;第三方服务提供发送短信的接口2&#xff0c;登录服务提供给前端的接口 二&#xff0c;215-商城业务-认证服务-一步一坑的注册页环境三&#xff0c;商城业务-认证服务-异常机制四&#xff0c;217-商城业务-认证服务-MD5&…...

在华为服务器的openEuler系统中适配Pytorch调用NPU

服务器架构&#xff1a;aarch64 yolov7 和 mindyolo 二选一即可&#xff0c;yolov7是基于pytorch&#xff0c;mindyolo是基于mindspore 本文档基于CANN8.0RC3 , 刚发布比较新&#xff0c;如果有问题&#xff0c;可将CANN版本降低 导读 资料首页&#xff1a;https://www.hiasce…...

MVCC工作原理深入解析

一、事务概述 mysql事务是指一组命令操作&#xff0c;在执行过程中用来保证要么全部成功&#xff0c;要么全部失败。事务是由引擎层面来支持的&#xff0c;MyISM引擎不支持事务&#xff0c;InnoDB引擎支持事务。 事务具有ACID四大特性 原子性&#xff08;Atomicity&#xff0…...

使用html+css+js实现完整的登录注册页面

在这篇博客中&#xff0c;我们将讨论如何使用简单的 HTML 和 CSS 构建一个登录与注册页面。这个页面包含两个主要部分&#xff1a;登录界面和注册界面。我们还会展示如何通过 JavaScript 切换这两个部分的显示状态。 页面结构 我们将创建一个页面&#xff0c;其中包含两个主要…...

2024年8月16日(运维自动化 ansible)

一、回顾 1、mysql和python (1)mysql5.7 1.1不需要执行mysql_ssl_rsa_setup 1.2change_master_to 不需要get public key (2)可以使用pymysql非交互的管理mysql 2.1pymysql.connect(host,user,password,database,port) 2.2 cursorconn.cursor() 2.3 cursor.execute("creat…...

荣耀Magicbook x14 扩容1TB固态

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 固态硬盘规格 在官网查看加装固态硬盘的接口规格 https://www.honor.com/cn/laptops/honor-magicbook-x14-2023/ https://club.honor.com/cn/thread-2847379…...

Springboot整合全文检索引擎Lucene

文章目录 前言Lucene的介绍springboot项目中如何整合Lucene简单用法1. 引入依赖2. 其它用到的类2. 创建索引3. 简单搜索4. 更新索引5. 删除索引6. 删除全部索引 Springboot整合Lucene复杂搜索1. 同时标题和内容中查找关键词2. 搜索结果高亮显示关键词3. 分页搜索4. 多关键词联合…...

【深度学习】【语音】TTS, 如何使用Python分析WAV的采样率、比特深度、通道数

文章目录 使用Python分析WAV文件的属性与可视化简介所需环境代码解析可视化音频数据结论使用Python分析WAV文件的属性与可视化 WAV文件录音要求 为了确保录制的音频文件符合TTS模型训练的质量标准,请遵循以下录音要求: 采样率要求:44.1 kHz说明:采样率44.1 kHz(即每秒采样…...

Linux的安装和使用

Linux 第一节 Linux 优势 1. 开源 为什么这么多的的设备都选择使用 Linux&#xff1f;因为它是开源软件&#xff08;open source software&#xff09;&#xff0c;具有不同的含义。使用一个安全的操作系统工作变得必不可少的事&#xff0c;而 Linux 恰好满足了这个需求。因…...

查看一个exe\dll文件的依赖项

方法 使用一个Dependencies工具&#xff0c;检测exe文件的所有依赖项 工具使用 下载压缩包之后解压&#xff0c;解压后如下图所示 在命令行中运行Dependencies.exe程序会得到帮助菜单 查询某exe的所有依赖项&#xff0c;使用命令 Dependencies.exe -chain <查询文件> …...

高校科研信息管理系统pf

TOC springboot364高校科研信息管理系统pf 第1章 绪论 1.1 研究背景 互联网概念的产生到如今的蓬勃发展&#xff0c;用了短短的几十年时间就风靡全球&#xff0c;使得全球各个行业都进行了互联网的改造升级&#xff0c;标志着互联网浪潮的来临。在这个新的时代&#xff0c;…...

Linux 开机自动挂载共享文件设置

选择一个要共享的文件 点击确定 -> 确定 启动虚拟机 执行下面的命令 /YumSource 是我选择的共享文件夹&#xff0c;自行替换自已选择的文件夹 mkdir -p /mnt/hgfs cat >> /etc/fstab << EOF .host:/YumSource /mnt/hgfs fuse.vmhgfs-fuse allow_other defaul…...

c_cpp_properties.json、launch.json、 tasks.json

在 Visual Studio Code 中&#xff0c;c_cpp_properties.json、launch.json 和 tasks.json 是三个重要的配置文件&#xff0c;它们的作用如下&#xff1a; c_cpp_properties.json&#xff1a; 这个文件用于配置 C/C 扩展的 IntelliSense、编译器路径和包括路径等。它帮助 VS Co…...

mysql 一些知识点 面试用

mysql 1、4个隔离级别与3个现象2、快照读与当前读2.1 可重复读的情况下出现幻读问题的两种情况 3 数据库 常用引擎4、InnoDB存储引擎对MVCC的实现5、索引(重点)5.1 什么是索引5.2 索引的创建与删除5.2.1 查看表中有哪些索引5.2.2 添加索引5.2.3 删除索引 5.3 索引的分类5.4 树数…...

STM32之点亮LED灯

使用固件库实现LED点灯 LED灯&#xff1a; LED灯&#xff0c;是一种能够将电能转化为可见光的半导体器件 控制LED灯&#xff1a; LED灯的正极接到了3.3V&#xff0c;LED灯的负极接到了PA1&#xff0c;也就是GPIOA1引脚 只需要控制PA1为相对应的低电平&#xff0c;即可点亮对…...

Java 多线程练习2 (抽奖比较Runnable写法)

MultiProcessingExercise2 package MultiProcessingExercise120240814;import java.util.ArrayList; import java.util.Collections;public class MultiProcessingExercise1 {public static void main(String[] args) {// 需求&#xff1a;// 在此次抽奖过程中&#xff0c;抽奖…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...