弹窗表单的使用，基于element-ui二次封装
el-dialog-form
介绍
基于element-ui封装的弹窗式表单组件
git地址
https://gitee.com/chenfency/el-dialog-form.git
更新日志
2021-8-12
- 版本1.0.0
2021-8-17
- 优化组件，兼容element原组件所有Attributes及Events
2021-9-9
- 新增tip提示
安装教程
- npm install el-dialog-form --save
使用说明
- 插件基于element-ui开发：element-ui文档
- 安装前请先确保已经安装element-ui
- npm install element-ui --save
- 验证器文档地址：https://github.com/yiminghe/async-validator
参数说明
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| visible | 是否显示dialog | Boolean | true | false |
| title | 标题 | String | - | - |
| width | 表单宽度 | String | - | - |
| items | 表单项，详细见下方说明 | Array | - | [] |
| form | 初始表单值 | Object | - | {} |
items参数说明
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 表单项的类型,必填 | String | input/input-number/radio-group/checkbox-group/select/switch/time-picker/date-picker | - |
| span | el-col的span值 | Number | - | 20 |
| label | 表单项label | String | - | - |
| prop | 表单项key | String | - | - |
| tip | 文字提示 | String | - | - |
| rules | 表单验证规则，验证器文档地址:https://github.com/yiminghe/async-validator | Array | - | - |
| hidden | 隐藏条件函数，返回true/false来控制显示隐藏 | Function | - | - |
| options | 选择项数组，仅type等于radio-group/checkbox-group/select生效,详细见下方说明 | Array | - | - |
| on | 事件监听，key->value形式，key值同element-ui的Events，value为一个函数，详见element-ui文档 | Object | - | - |
| attrs | 属性参数，key->value形式，key值同element-ui的Attributes，详见element-ui文档 | Object | - | - |
options参数说明
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 显示的label | String | - | - |
| value | 选中的value | Any | - | - |
示例代码
<template><div class="app-container"><el-button @click="dialog = true">打开表单</el-button><!-- 表单 --><el-dialog-form :visible.sync="dialog" title="表单标题" width="500px" :items="items" :form="form"@submit="onSubmit"></el-dialog-form></div>
</template><script>import elDialogForm from 'el-dialog-form'export default {components: {elDialogForm},data() {return {form: {input: '',inputNumber:0,switch:false,timePicker:'',datePicker:'',radioGroup:1,checkboxGroup:[],select:[],checkbox:true},dialog: false,items: [{type: 'input',label: '普通输入',prop: 'input',rules: [{required: true,message: "请输入名称",trigger: 'blur'}],attrs:{placeholder:'请输入名称'},on: {blur: (e) => {console.log(e);}},},{type: 'input-number',label: '计数器',prop: 'inputNumber',on: {}},{type: 'switch',label: '开关',prop: 'switch',on: {}},{type: 'time-picker',label: '时间选择',prop: 'timePicker',on: {}},{type: 'date-picker',label: '日期选择',prop: 'datePicker',attrs:{},},{type: 'radio-group',label: '单选框组',prop: 'radioGroup',tip:'radio-group说明',options:[{label:'苹果',value:1},{label:'西瓜',value:2}],on:{change:(e)=>{console.log('-----------');console.log(e);}}},{type: 'checkbox-group',label: '多选框组',prop: 'checkboxGroup',options:[{label:'金毛',value:1},{label:'哈士奇',value:2}],on:{change:(e)=>{console.log('-----------');console.log(e);}}},{type: 'select',label: '下拉选择',prop: 'select',options:[{label:'鼠标',value:1},{label:'键盘',value:2}],attrs:{placeholder:'请输入名称'},on:{change:(e)=>{console.log('-----------');console.log(e);}}},{type: 'checkbox',label: '选择',prop: 'checkbox',attrs:{label:"我同意"},on:{change:(e)=>{console.log('-----------');console.log(e);}}},]}},methods: {onSubmit(form) {console.log(form);}},}
</script>
喜欢的朋友记得点赞、收藏、关注哦！！！
相关文章：
弹窗表单的使用，基于element-ui二次封装
el-dialog-form 介绍 基于element-ui封装的弹窗式表单组件 示例 git地址 https://gitee.com/chenfency/el-dialog-form.git 更新日志 2021-8-12 版本1.0.0 2021-8-17 优化组件，兼容element原组件所有Attributes及Events 2021-9-9 新增tip提示 安装教程 npm install …...
关系模式-无损连接和保持函数依赖的判断
1、怎样判断一个关系模式的分解是否是无损连接？ 方法一：公式定理法 关系模式R<U,F>的一个分解具有无损连接的充分必要条件是： 或 方法二：表格法（常用与分解成3个及以上关系模式） a. 通过立一张j…...
Vmware 最新下载教程和安装教程，外带免下载文件
一、VMware 的简介 VMware 是一款功能强大的桌面虚拟计算机软件，提供用户可在单一的桌面上同时运行不同的操作系统，和进行开发、测试 、部署新的应用程序的最佳解决方案。VMware可在一部实体机器上模拟完整的网络环境，以及可便于携带的虚拟机…...
开平机：从原理到实践的全面技术剖析
一、开平机核心模块技术解析 1. 校平辊系的力学建模与辊型设计 校平机精度核心在于辊系设计，需通过弹塑性力学模型计算变形量。典型校平辊配置参数： 辊径比：校平辊直径（D）与板材厚度（t）需满足…...
Edu教育邮箱申请2025年5月
各位好，这里是aigc创意人竹相左边 如你所见，这里是第3部分 现在是选择大学的学科专业 选专业的时候记得考虑一下当前的时间日期。 比如现在是夏天，所以你选秋天入学是合理的。...
文本框碰撞测试
1.核心代码: // 初始化舞台和变量 var stage, textField, bounds, velocity;function init() {// 创建舞台stage = new createjs.Stage("canvas");// 设置矩形边界bounds = {x: 50, y: 50, width: 400, height: 300};// 绘制边界矩形var border = new createjs.Shap…...
LeRobot 项目部署运行逻辑（六）——visualize_dataset_html.py/visualize_dataset.py
可视化脚本包括了两个方法：远程下载 huggingface 上的数据集和使用本地数据集 脚本主要使用两个： 目前来说，ACT 采集训练用的是统一时间长度的数据集，此外，这两个脚本最大的问题在于不能裁剪，这也是比较好…...
Python函数：从基础到进阶的完整指南
在Python编程中，函数是构建高效、可维护代码的核心工具。无论是开发Web应用、数据分析还是人工智能模型，函数都能将复杂逻辑模块化，提升代码复用率与团队协作效率。本文将从函数基础语法出发，深入探讨参数传递机制、高阶特性及最佳…...
图灵爬虫练习平台第七题千山鸟飞绝js逆向
题目七：千山鸟飞绝 还是先进入开发者模式，一进来还是一个无限debugger，直接右键点击一律不在此处停留 然后点击下一页，复制curl进行代码生成，然后就会发现加密内容是headers中的m,ts，还有参数中的x…...
使用Python和OpenCV实现实时人脸检测与识别
前言 在计算机视觉领域，人脸检测与识别是两个非常重要的任务。人脸检测是指在图像中定位人脸的位置，而人脸识别则是进一步识别出人脸的身份。随着深度学习的发展，这些任务的准确性和效率都有了显著提升。OpenCV是一个开源的计算机视觉库&…...
Excel实现单元格内容拼接
一、应用场景： 场景A：将多个单元格拼接，比如写测试用例时，将多个模块拼接，中间用“-”隔开 场景B：将某单元格内容插入另一单元格固定位置（例如在B1中添加A1的内容） 二、实际应用&a…...
C语言实现：打印素数、最大公约数
本片博客起源于作者在经历了学校的测试之后猛然发现自己居然忘记了一些比较基础的代码，因此写了本片博客加强记忆 以下算法仅供参考 打印素数 打印：0到200之间所有的素数 #define _CRT_SECURE_NO_WARNINGS#include<stdio.h> #include<math.h&…...
TDengine 在智慧油田领域的应用
简介 智慧油田，亦称为数字油田或智能油田，是一种采用尖端信息技术与先进装备的现代油田开发模式。该模式通过实时更新油气田层析图及动态生产数据，显著提高了油气田的开发效率与经济价值。 信息技术在此领域发挥着至关重要的作用࿰…...
将 iconfont 图标转换成element-plus也能使用的图标组件
在做项目时发现，element-plus的图标组件，不能像文档示例中那样使用 iconfont 的图标。经过研究发现，element-plus的图标封装成了vue组件，组件内容是一个svg，然后以组件的方式引入和调用图标。根据这个思路，…...
使用程序绘制中文字体——中文字体的参数化设计方案初探
目录 写在前面基本设计思路笔画骨架参数设计笔画风格参数设计起笔风格转角风格字重变化弯曲程度 字形的“组装拟合”基于骨架的结构调整笔画绘制二三事撇的两侧轮廓绘制——不是两条贝塞尔曲线那么简单转角的处理，怎样能显得不突兀？笔画骨架关键点的拖拽…...
高频数据结构面试题总结
基础数据结构 1. 数组(Array) 特点：连续内存、固定大小、随机访问O(1)常见问题： 两数之和/三数之和合并两个有序数组删除排序数组中的重复项旋转数组最大子数组和(Kadane算法) 2. 链表(Linked List) 类型：单链表、双链表、循环链表常见问…...
工业设计破局密码：3D 可视化技术点燃产业升级引擎
3D可视化是一种将数据、信息或抽象概念以三维图形、模型和动画的形式呈现出来的技术。3D可视化技术通过构建三维数字孪生体，将设计思维转化为可交互的虚拟原型，不仅打破了传统二维设计的空间局限，更在效率、精度与用户体验层面开创了全新维度…...
【动态导通电阻】p-GaN HEMTs正向和反向导通下的动态导通电阻
2024 年，浙江大学的 Zonglun Xie 等人基于多组双脉冲测试方法，研究了两种不同技术的商用 p-GaN 栅极 HEMTs 在正向和反向导通模式以及硬开关和软开关条件下的动态导通电阻（RON）特性。实验结果表明，对于肖特基型 p-GaN 栅极 HEMTs，反向导通时动态 RON 比正向导通高 3%-5%；…...
Python代码编程基础
字符串 str.[]实现根据下标定位实现对元素的截取 for 循环可以实现遍历 while 循环可以在实现遍历的同时实现对某一下标数值的修改 字符串前加 r 可以实现对字符串的完整内容输出 字符串前加 f 可以实现对字符串内{}中包裹内容的格式化输出，仅在 v3.6 之后可用…...
基于RAG+MCP开发【企文小智】企业智能体
一、业务场景描述 1.1、背景介绍 几乎每家企业都积累了大量关于规章制度的文档资料，例如薪酬福利、绩效考核、保密协议、考勤管理、采购制度、资产管理制度等。这些文档大多以 Word、PDF 等非结构化格式存在。传统方式下，员工在查询某项具体规则时&…...
【软件测试】测试用例的设计方法
目录 一、基于需求进行测试用例的设计 1.1 功能需求测试分析 二、黑盒测试用例设计方法 2.1 等价类划分法（解决穷举） 2.1.1 等价类设计步骤 2.1.2 等价类划分法案例 2.1.2.1 验证 QQ 账号的合法性 2.1.2.2 验证某城市电话号码的正确性 2.1.3 适用场景 2.2 边界值分析…...
——3.5高速以太网)
计算机网络笔记(十八)——3.5高速以太网
3.5.1 100BASE-T以太网 1. 基本概念 标准规范：IEEE 802.3u，是快速以太网的典型代表，运行速率100Mbps。物理介质：使用双绞线（UTP或STP），支持最大传输距离100米（Cat5/5e及以上&#…...
海外广告账号资源解析：如何选择适合业务的广告账户？
在全球化数字营销的浪潮下，海外广告投放已成为企业拓展市场的核心手段。然而，不同平台的广告账号类型复杂多样，如何选择适合自身业务的资源？本文将深度解析 Facebook、Google、TikTok 三大平台的广告账号类型，助您精准…...
Java设计模式之建造者模式：从入门到精通
1. 建造者模式概述 1.1 定义与核心概念 **建造者模式(Builder Pattern)**是一种创建型设计模式，它将复杂对象的构建过程与其表示分离，使得同样的构建过程可以创建不同的表示。 专业术语解释表： 术语解释产品(Product)最终要构建的复杂对象建造者(Builder)定义创建产品各个…...
Faiss 索引深度解析：从基础到实战
在处理高维数据的相似性搜索时，Faiss（Facebook AI Similarity Search）无疑是一款强大且高效的工具。它为我们提供了多种索引类型，适用于不同规模和需求的数据场景。本文将结合代码实例，深入剖析 Faiss 中常见索引的原理…...
 dapper sqlite)
Error parsing column 10 (YingShou=-99.5 - Double) dapper sqlite
在使用sqlite 调取 dapper的时候出现这个问题提示： 原因是 在 sqlite表中设定的字段类型是 decimel而在C#的字段属性也是decimel，结果解析F负数 小数的时候出现这个错误提示： 解决办法：使用默认的sqlite的字段类型来填入 REAL描述…...
星云智控：物联网时代的设备守护者——卓伊凡详解物联网监控革命-优雅草卓伊凡
星云智控：物联网时代的设备守护者——卓伊凡详解物联网监控革命-优雅草卓伊凡 一、物联网的本质解析 1.1 什么是物联网？ 当卓伊凡被问及”星云智控物联网是干嘛的”这个问题时，他首先给出了一个技术定义：物联网（Int…...
LeRobot 项目部署运行逻辑（五）——intelrealsense.py/configs.py
在运行 control_robot.py 的时候会启用相机拍摄，lerobot 中封装好了两种相机类型：realsense 和 opencv realsense 直接使用他们的脚本就可以，但需要在 lerobot/robot_devices/robots/configs.py 中修改相机 serial_number 由于我们设备采用的…...
从0开始学linux韦东山教程第一三章问题小结（1）
本人从0开始学习linux，使用的是韦东山的教程，在跟着课程学习的情况下的所遇到的问题的总结,理论虽枯燥但是是基础。 摘要关键词：VMware、Ubuntu、网络网口 视频链接：【【韦东山】韦东山手把手教你嵌入式Linux快速入门到精通 | Lin…...
解决 MySQL 数据库无法远程连接的问题
在使用 MySQL 数据库时，遇到这样的问题： 本地可以连接 MySQL，但远程机器连接时，总是报错 Host ... is not allowed to connect to this MySQL server。 这通常是因为 MySQL 的用户权限或配置限制了远程访问。 1. 登录 MySQL 数据…...
分享一款开源的图片去重软件 ImageContrastTools，基于Electron和hash算法
最近发现个挺实在的图片查重软件，叫ImageContrastTools。电脑手机都能用，特别适合整理乱七八糟的相册。直接去这里下载就能用： https://github.com/html365/ImageContrastTools 功能说明： 1️⃣ 选个文件夹就能自动扫重复图&…...
软件测试——用例篇（2）
目录 一、基于需求的设计方法 1.1设计账号注册、账号登录的测试用例 1.1.1功能测试 1.1.2界面测试 1.1.3性能测试 1.1.4兼容性测试 1.1.5易用性测试 1.1.6安全测试 一、基于需求的设计方法 根据参考需求文档/产品规格说明书来设计测试用例 测试人员接到需求之后、对需求…...
图像匹配导航定位技术 第 11 章
第 11 章 基 于 改 进 SIFT 的 SAR 与 可 见光 图 像 匹 配 控 制 点 定 位 算 法 HOG 描述子也只是对整幅图像的特征向量进行匹配，但是仍然存在局部匹配误差。而局部不变特征（如 SIFT,Harris 等）是对特征点局部邻域的特征进行描述来构造局部…...
安装jdk步骤
将Linux安装jdk的步骤放入shell脚本中 #!/bin/bash # 阿里云服务器专用 - 全自动安装 OpenJDK 1.8（无交互） # 仅支持 yum 系系统（CentOS/RHEL/Alibaba Cloud Linux）# 检查 root 权限 if [ "$(id -u)" -ne 0 ]; thenech…...
理解 `.sln` 和 `.csproj`：从项目结构到构建发布的一次梳理
理解 .sln 和 .csproj：从项目结构到构建发布的一次梳理 在初学 .NET 项目开发时，很多人都会对 .sln（解决方案）和 .csproj（项目）文件感到疑惑。随着开发经验的积累，我逐渐理解了这些层级的设计意…...
高频算法面试题总结
高频算法面试题总结 排序算法 1. 基础排序算法 快速排序： public void quickSort(int[] arr, int low, int high) {if (low < high) {int pivot = partition(arr, low, high);quickSort(arr, low, pivot - 1);quickSort(arr, pivot + 1, high);} }平均时间复杂度：O(n lo…...
SQL进阶:如何把字段中的键值对转为JSON格式?
JSON 一、问题描述二、ORACLE<一>、键值对拆分(REGEXP_SUBSTR)<二>、转为JSON<三>、不足 三、MYSQL<一>、键值对拆分(RECURSIVE)<二>、转为JSON 一、问题描述 假如某张表的某列是键值对数据,如何把这个键值对转为json格式,数据如下所示 dynast…...
vue3:十二、图形看板- echart图表-柱状图、饼图
一、效果 如图展示增加了饼图和柱状图，并且优化了浏览器窗口大小更改，图表随着改变 二、 饼图 1、新建组件文件 新增组件EchartsExaminePie.vue，用于存储审核饼图的图表 2、写入组件信息 (1)视图层 写入一个div，写入变量chart和图表宽高 <template><div ref…...
nacos-server-2.2.2.tar及使用方式
下载链接 nacos-server-2.2.2.tar包及使用资源-CSDN文库 下载与安装 下载地址：可从 Nacos 官网版本下载页面 或 Nacos GitHub Releases 获取 nacos-server-2.2.2.tar.gz 安装包。 环境准备：Nacos 依赖 Java 环境运行，需确保安装了 64 位 J…...
el-form的label星号位置如何修改
默认情况 修改后 实现代码 .el-form {.el-form-item {.el-form-item__label {padding: 0;&::before {float: none;position: relative;}}} }...
小刚说C语言刷题—1004阶乘问题
1.题目描述 编程求 123⋯n 。 输入 输入一行，只有一个整数 n(1≤n≤10)； 输出 输出只有一行（这意味着末尾有一个回车符号），包括 1 个整数。 样例 输入 5 输出 120 2.参考代码(C语言版) #include <stdio…...
Java 集合体系深度解析面试篇
一、Java 集合体系核心架构与高频考点 1. 集合体系架构图（大厂必问） Java集合框架 ├─ Collection（单列集合） │ ├─ List（有序、可重复） │ │ ├─ ArrayList（动态数组，随机…...
websocketd 10秒教程
websocketd 参考地址：joewalnes/websocketd 官网地址：websocketd websocketd简述 websocketd是一个简单的websocket服务Server，运行在命令行方式下，可以通过websocketd和已经有程序进行交互。 现在，可以非常容易地构…...
PCA降维
主成分分析（Principal Component Analysis，PCA）降维是一种广泛使用的无监督机器学习技术，主要用于数据预处理阶段，其目的是在尽量保留数据重要信息的前提下，减少数据的维度。 PCA 的原理 PCA 的核心思想…...
【计算机视觉】OpenCV实战项目: opencv-text-deskew：实时文本图像校正
opencv-text-deskew：基于OpenCV的实时文本图像校正 一、项目概述与技术背景1.1 核心功能与创新点1.2 技术指标对比1.3 技术演进路线 二、环境配置与算法原理2.1 硬件要求2.2 软件部署2.3 核心算法流程 三、核心算法解析3.1 文本区域定位3.2 角度检测优化3.3 仿射变换…...
具身智能时代的机器人导航和操作仿真器综述
系列文章目录 前言 导航和操作是具身智能的核心能力，然而在现实世界中训练具有这些能力的智能体却面临着高成本和时间复杂性。因此，从模拟到现实的转移已成为一种关键方法，但模拟到现实的差距依然存在。本调查通过分析以往调查中忽略的物理模…...
Go语言Stdio传输MCP Server示例【Cline、Roo Code】
Go语言 Stdio 传输 MCP Server 示例 AI 应用开发正处于加速发展阶段，新技术和新方法不断涌现。Model Context Protocol （MCP） 作为一个开放标准，正在改变 AI 应用与数据源和工具集成的方式。 Go-MCP 是一个 MCP 协议的 GO 实现&…...
Xcode16.3配置越狱开发环境
首先先在https://developer.apple.com/xcode/resources/ 这里面登陆Apple账号，然后访问url下载 https://download.developer.apple.com/Developer_Tools/Xcode_16.3/Xcode_16.3.xip 1、安装theos https://theos.dev/docs/installation-macos 会安装到默认位置~/th…...
AWS IoT Core与MSK跨账号集成:突破边界的IoT数据处理方案
随着企业规模的扩大和业务的复杂化,跨账号资源访问成为云架构中的一个常见需求。本文将深入探讨如何实现AWS IoT Core与Amazon MSK(Managed Streaming for Apache Kafka)的跨账号集成,为您的IoT数据处理方案开辟新的可能性。无论您是正在构建多账号架构,还是需要整合不同部门的…...
】)
【Python 列表(List)】
Python 中的列表（List）是最常用、最灵活的有序数据集合，支持动态增删改查操作。以下是列表的核心知识点： 一、基础特性 有序性：元素按插入顺序存储可变性：支持增删改操作允许重复：可存储重复元…...