代码优化——基于element-plus封装组件：表单封装

前言

    今天实现一个基于element-plus表单组件的二次封装，什么是二次封装？查看以下表单，传统表单组件是不是用<el-form>嵌套几个<el-form-item>即可实现，那么一个表单可不可以实现，传入一个对象给封装组件，通过对象的type值来进行表单的实现。当一个项目有多个不同的表单内容时，能够实现代码的复用性、可读性。

点击提交校验效果：

 

传统写法：

<el-form :model="form" label-width="auto" style="max-width: 600px"><el-form-item label="Activity name"><el-input v-model="form.name" /></el-form-item>
</el-form>

封装后写法(封装组件命名为：form-enhance)：

const formConfig = [ { key: 'name', type: 'input'} ]<form-enhance :formConfig=formConfig />

Vite+Vue3+elemplus-plus传统表单实现：

<!-- 原始表单 -->
<script setup>
import { ref } from 'vue'
const form = ref({name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: '',
})const onSubmit = () => {console.log('submit!')
}
</script>
<!-- 初始表单 -->
<template><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1"style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" xx` style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form>
</template><style scoped></style>

Vite+Vue3+elemplus-plus二次封装表单实现：

FormEnhance..vue子组件

<template><el-form :model="formData" :label-width="labelWidth" ref="formRef"><template v-for="(row, rowIndex) in formConfig" :key="rowIndex"><el-row :gutter="20"><template v-for="item in row" :key="item.key"><el-col :span="item.span || 24"><!-- 日期分隔符处理 --><template v-if="item.type === 'separator'"><div class="form-separator">{{ item.content || '-' }}</div></template><!-- 表单项目处理 添加规则 --><el-form-item v-else :label="item.label" :prop="item.key" :rules="item.rules"><!-- input输入框 --><el-input v-if="item.type === 'input'" v-model="formData[item.key]":placeholder="item.placeholder" clearable /><!-- select选择器 --><el-select v-else-if="item.type === 'select'" v-model="formData[item.key]":placeholder="item.placeholder" clearable><el-option v-for="option in item.options" :key="option.value" :label="option.label":value="option.value" /></el-select><!-- 日期选择器 --><el-date-picker v-else-if="item.type === 'date'" v-model="formData[item.key]" type="date":placeholder="item.placeholder" style="width: 100%" /><!-- 时间选择器 --><el-time-picker v-else-if="item.type === 'time'" v-model="formData[item.key]":placeholder="item.placeholder" style="width: 100%" /><!-- 开关 --><el-switch v-else-if="item.type === 'switch'" v-model="formData[item.key]" /><!-- 复选框组 --><el-checkbox-group v-else-if="item.type === 'checkbox-group'" v-model="formData[item.key]"><el-checkbox v-for="option in item.options" :key="option.value" :label="option.value">{{ option.label }}</el-checkbox></el-checkbox-group><!-- 单选框组 --><el-radio-group v-else-if="item.type === 'radio-group'" v-model="formData[item.key]"><el-radio v-for="option in item.options" :key="option.value" :label="option.value">{{ option.label }}</el-radio></el-radio-group><!-- 文本域 --><el-input v-else-if="item.type === 'textarea'" v-model="formData[item.key]" type="textarea":rows="4" /></el-form-item></el-col></template></el-row></template></el-form>
</template><script setup>
import { ref } from 'vue'
// 接收参数
defineProps({formData: {type: Object,required: true},formConfig: {type: Array,required: true,validator: value => value.every(row => Array.isArray(row))},labelWidth: {type: String,default: '80px'}
})
// 提交表单的方法
const formRef = ref(null);const submitForm = () => {formRef.value.validate((valid) => {if (valid) {console.log('表单提交成功:', props.formData)} else {console.error('请完善表单!')return false;}})
}
// 重置表单的方法
const resetForm = () => {// 清空校验信息formRef.value.clearValidate();
}
// 暴露给父组件使用
defineExpose({submitForm,resetForm
})</script><style lang="scss" scoped>
.form-separator {text-align: center;line-height: 32px;height: 100%;
}
</style>

encapsulationForm.vue 父组件

<!-- 二次封装表单 -->
<script setup>
import { ref } from 'vue'
import FormEnhance from '../common/components/FormEnhance..vue'const formEnhanceRef = ref(null);
// 触发子组件的submitForm方法
const handleSubmit = () => {if (formEnhanceRef.value && typeof formEnhanceRef.value.submitForm === 'function') {formEnhanceRef.value.submitForm();} else {console.error("---");}
}
// 重置处理函数
const handleReset = () => {if (formEnhanceRef.value && typeof formEnhanceRef.value.resetForm === 'function') {// 清除验证信息formEnhanceRef.value.resetForm();// 重置表单数据for (let key in resetData.value) {formData.value[key] = resetData.value[key];}} else {console.error("-----");}
}
// 表单数据
const formData = ref({name: '',//活动名称region: '', //活动区域date1: '', // 活动时间date2: '',  // 活动时间delivery: false, // 开关type: [], // 活动性质resource: '', // 活动资源desc: '' // 活动形式
})
// 重置表单数据
const resetData = ref({name: '',//活动名称region: '', //活动区域date1: '', // 活动时间date2: '',  // 活动时间delivery: false, // 开关type: [], // 活动性质resource: '', // 活动资源desc: '' // 活动形式
})
// 表单配置 
const formConfig = [// 活动名称[{key: 'name',type: 'input',label: '活动名称',span: 24,placeholder: '请输入活动名称',rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' },]}],// 活动区域[{key: 'region',type: 'select',label: '活动区域',span: 24,placeholder: '请选择活动区域',options: [{ label: '区域一', value: 'shanghai' },{ label: '区域二', value: 'beijing' }],rules: [{ required: true, message: '请选择活动区域', trigger: 'blur' },]}],// 活动时间 (日期+分隔符+时间)[{key: 'date1',type: 'date',label: '活动时间',span: 11,placeholder: '选择日期',rules: [{ required: true, message: '请选择活动时间', trigger: 'change' }]},{type: 'separator',//分隔符span: 2},{key: 'date2',type: 'time',span: 11,placeholder: '选择时间',rules: [{ required: true, message: '请选择活动时间', trigger: 'change' }]}],// 即时配送[{key: 'delivery',type: 'switch',label: '即时配送',span: 24}],// 活动性质[{key: 'type',type: 'checkbox-group',label: '活动性质',span: 24,options: [{ label: '美食/餐厅线上活动', value: '美食/餐厅线上活动' },{ label: '地推活动', value: '地推活动' },{ label: '线下主题活动', value: '线下主题活动' },{ label: '单纯品牌曝光', value: '单纯品牌曝光' }],rules: [{ required: true, message: '请选择活动性质', trigger: 'blur' },]}],// 特殊资源[{key: 'resource',type: 'radio-group',label: '特殊资源',span: 24,options: [{ label: '线上品牌商赞助', value: '线上品牌商赞助' },{ label: '线下场地免费', value: '线下场地免费' }],rules: [{ required: true, message: '请选择', trigger: 'blur' },]}],// 活动形式[{key: 'desc',type: 'textarea',label: '活动形式',span: 24,placeholder: '请输入活动形式',rules: [{ required: true, message: '请输入活动形式', trigger: 'blur' },]}]
]
</script><template><div class="form"><!-- 使用FormEnhance组件 --><FormEnhance ref="formEnhanceRef" :form-data="formData" :form-config="formConfig" /><!-- 提交按钮 --><el-button type="primary" @click="handleSubmit">提交</el-button><!-- 重置表单 --><el-button type="default" @click="handleReset">重置</el-button></div>
</template>

扩展：父组件点击提交和重置时，触发子组件 submitForm, resetForm 方法

子组件：el-form记得绑定ref="formRef"

// 提交表单的方法
const formRef = ref(null);const submitForm = () => {formRef.value.validate((valid) => {if (valid) {console.log('表单提交成功:', props.formData)} else {console.error('请完善表单!')return false;}})
}
// 重置表单的方法
const resetForm = () => {// 清空校验信息formRef.value.clearValidate();
}
// 暴露给父组件使用
defineExpose({submitForm,resetForm
})

父组件调用子组件暴露出的方法：

const formEnhanceRef = ref(null);
// 触发子组件的submitForm方法
const handleSubmit = () => {if (formEnhanceRef.value && typeof formEnhanceRef.value.submitForm === 'function') {formEnhanceRef.value.submitForm();} else {console.error("---");}
}
// 重置处理函数
const handleReset = () => {if (formEnhanceRef.value && typeof formEnhanceRef.value.resetForm === 'function') {// 清除验证信息formEnhanceRef.value.resetForm();// 重置表单数据for (let key in resetData.value) {formData.value[key] = resetData.value[key];}} else {console.error("-----");}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/31983.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

docker私有仓库配置

docker私有仓库配置

基于 harbor 构建docker私有仓库 1、机器准备 os&#xff1a;openEuler 、rockylinux mem&#xff1a;4G disk&#xff1a;100G 2、关闭防火墙、禁用SELinux 3、安装docker和docker-compose yum install docker-ce -y配置加速 vim /etc/docker/d…
阅读更多...
SpringBoot集成MQ，四种交换机的实例

SpringBoot集成MQ，四种交换机的实例

​RabbitMQ交换机&#xff08;Exchange&#xff09;的核心作用 在RabbitMQ中&#xff0c;​交换机 是消息路由的核心组件&#xff0c;负责接收生产者发送的消息&#xff0c;并根据规则&#xff08;如路由键、头信息等&#xff09;将消息分发到对应的队列中。 不同交换机类型决…
阅读更多...
Docker 配置镜像源

Docker 配置镜像源

》》Daemon {"registry-mirrors": ["https://docker.1ms.run","https://docker.xuanyuan.me"] }》》》然后在重新 docker systemctl restart docker
阅读更多...
llamafactory 微调教程

llamafactory 微调教程

文章目录 llamlafactory微调deepseekr1-0.5b1.1 说明1.2 搭建环境创建GPU实例连接实例部署llama_factory创建隧道&#xff0c;配置端口转发访问llama_factory 1.3 微调大模型从huggingface上下载基座模型查看模型是否下载成功准备数据集微调评估微调效果导出合并后的模型 释放实…
阅读更多...
[项目]基于FreeRTOS的STM32四轴飞行器: 七.遥控器按键

[项目]基于FreeRTOS的STM32四轴飞行器: 七.遥控器按键

基于FreeRTOS的STM32四轴飞行器: 七.遥控器 一.遥控器按键摇杆功能说明二.摇杆和按键的配置三.按键扫描 一.遥控器按键摇杆功能说明 两个手柄四个ADC。 左侧手柄&#xff1a; 前后推为飞控油门&#xff0c;左右推为控制飞机偏航角。 右侧手柄&#xff1a; 控制飞机飞行方向&a…
阅读更多...
2025-03-08 学习记录--C/C++-PTA 习题10-1 判断满足条件的三位数

2025-03-08 学习记录--C/C++-PTA 习题10-1 判断满足条件的三位数

合抱之木&#xff0c;生于毫末&#xff1b;九层之台&#xff0c;起于累土&#xff1b;千里之行&#xff0c;始于足下。&#x1f4aa;&#x1f3fb; 一、题目描述 ⭐️ 裁判测试程序样例&#xff1a; #include <stdio.h> #include <math.h>int search( int n );int…
阅读更多...
光谱相机检测肉类新鲜度的原理

光谱相机检测肉类新鲜度的原理

光谱相机通过分析肉类样本在特定波长范围内的光谱反射特性&#xff0c;结合化学与生物指标的变化规律&#xff0c;实现对其新鲜度的无损检测。其核心原理可概括为以下方面&#xff1a; 一、光谱特征与物质成分的关联性 ‌物质特异性吸收/反射‌ 不同化学成分&#xff08;如水分…
阅读更多...
【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现软件开机自启

【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现软件开机自启

文章目录 前言 一、准备工作1.1 环境搭建1.2 创建 Tauri 项目1.3 添加依赖 二、实现开机自启的基本原理2.1 开机自启的基本概念2.2 Tauri 应用的生命周期 三、Windows 平台实现3.1 Windows 注册表机制3.2 实现步骤3.3 注意事项 四、Linux 平台实现4.1 Linux systemd 服务4.2 实…
阅读更多...
Windows10下docker desktop命令行操作指南（大部分也适用于Linux）

Windows10下docker desktop命令行操作指南（大部分也适用于Linux）

Windows系统最大的特点就是可视化操作&#xff0c;点点鼠标就能操作软件。但是在特殊的情况下&#xff0c;比如docker desktop图标点了之后没反应&#xff0c;但是看后台程序&#xff0c;它又已经运行了&#xff0c;这时候就要使用命令行来操作了。 针对这次情况&#xff0c;所…
阅读更多...
静态时序分析：无法满足的生成时钟（TIM-255警告、UITE-461或PTE-075错误）

静态时序分析：无法满足的生成时钟（TIM-255警告、UITE-461或PTE-075错误）

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 在阅读本文前&#xff0c;强烈建议首先阅读介绍生成时钟的文章&#xff0c;尤其是其中关于时钟极性和反相的相关内容。 静态时序分析&#xff1a;SDC约束命令cr…
阅读更多...
计算机网络--访问一个网页的全过程

计算机网络--访问一个网页的全过程

文章目录 访问一个网页的全过程应用层在浏览器输入URL网址http://www.aspxfans.com:8080/news/index.aspboardID5&ID24618&page1#r_70732423通过DNS获取IP地址生成HTTP请求报文应用层最后 传输层传输层处理应用层报文建立TCP连接传输层最后 网络层网络层对TCP报文进行处…
阅读更多...
从零开发Chrome广告拦截插件：开发、打包到发布全攻略

从零开发Chrome广告拦截插件：开发、打包到发布全攻略

从零开发Chrome广告拦截插件&#xff1a;开发、打包到发布全攻略 想打造一个属于自己的Chrome插件&#xff0c;既能拦截烦人的广告&#xff0c;又能优雅地发布到Chrome Web Store&#xff1f;别担心&#xff0c;这篇教程将带你从零开始&#xff0c;动手开发一个功能强大且美观…
阅读更多...
AI智能眼镜主控芯片：技术演进与产业生态的深度解析

AI智能眼镜主控芯片：技术演进与产业生态的深度解析

一、AI智能眼镜的技术挑战与主控芯片核心诉求 AI智能眼镜作为XR&#xff08;扩展现实&#xff09;技术的代表产品&#xff0c;其核心矛盾在于性能、功耗与体积的三角平衡。主控芯片作为设备的“大脑”&#xff0c;需在有限空间内实现复杂计算、多模态交互与全天候续航&#xf…
阅读更多...
elasticsearch 8.17.3部署文档

elasticsearch 8.17.3部署文档

elasticsearch 8.17.3部署文档 一、架构拓扑 ip主机名角色192.168.241.151slave1master192.168.241.152slave2node1192.168.241.153slave3node2 二、安装包下载——分别下载上传至所有的节点 下载地址https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-…
阅读更多...
PySide(PyQT)，QGraphicsItem的pos()和scenePos()区别

PySide(PyQT)，QGraphicsItem的pos()和scenePos()区别

在QGraphicsItem中&#xff0c;pos()和scenePos()是两个重要的方法&#xff0c;用于描述图形项的位置&#xff0c;但它们的含义和用途有所不同。理解它们的区别对于正确操作和管理QGraphicsItem的位置至关重要。 1. pos()方法 • 定义&#xff1a;pos()返回的是QGraphicsItem在…
阅读更多...
Linux 进程控制：创建、终止、等待与程序替换全解析

Linux 进程控制：创建、终止、等待与程序替换全解析

亲爱的读者朋友们&#x1f603;&#xff0c;此文开启知识盛宴与思想碰撞&#x1f389;。 快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 目录 1.进程创建 1-1 fork函数初识​ 1-2 fork函数返回值​ 1-3…
阅读更多...
GStreamer —— 2.18、Windows下Qt加载GStreamer库后运行 - “播放教程 6：音频可视化“（附：完整源码）

GStreamer —— 2.18、Windows下Qt加载GStreamer库后运行 - “播放教程 6：音频可视化“（附：完整源码）

运行效果 介绍 GStreamer 带有一组将音频转换为视频的元素。他们 可用于科学可视化或为您的音乐增添趣味 player 的本教程展示了&#xff1a; • 如何启用音频可视化 • 如何选择可视化元素 启用音频可视化实际上非常简单。设置相应的标志&#xff0c;当纯音频流为 found&#…
阅读更多...
Excel多级联动下拉菜单设置

Excel多级联动下拉菜单设置

1.问题描述 现有数据表如下图所示&#xff1a; 该表中包括省、市、县三级目录。 现要将其整理成数据表模板&#xff0c;如下图所示&#xff1a; 要求制作成下拉菜单的形式&#xff0c;且每一级目录的下拉菜单列表要根据上一级目录的内容来确定。 如上图所示&#xff0c;只有…
阅读更多...
Web基础：HTML快速入门

Web基础：HTML快速入门

HTML基础语法 HTML&#xff08;超文本标记语言&#xff09; 是用于创建网页内容的 标记语言&#xff0c;通过定义页面的 结构和内容 来告诉浏览器如何呈现网页。 超文本&#xff08;Hypertext&#xff09; 是一种通过 链接&#xff08;Hyperlinks&#xff09; 将不同文本、图像…
阅读更多...
VSTO（C#）Excel开发2：Excel对象模型和基本操作

VSTO（C#）Excel开发2：Excel对象模型和基本操作

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023