vue3封装Element动态表单组件

在这里插入图片描述

1. 封装组件DymanicForm.vue

  1. 使用component实现动态组件
  2. 组件不能直接使用字符串传入,所以根据传入的组件名称找到对应的组件
  3. 校验规则,可使用rule传入自定义规则,也可以使用封装好的基本规则 示例中使用了checkRequired
  4. 暴露重置方法和校验方法
<template><el-form:model="currentValue"ref="dymanicForm"v-bind="$attrs"@submit.native.prevent><el-form-item:prop="index":rules="item.rules"v-for="(item, index) in currentSchema":key="index"v-bind="item.formItem || {}"><componentv-model="currentValue[index]":is="item.componentName"v-bind="item"v-on="item.methods || {}"/></el-form-item><slot /></el-form>
</template><script lang="ts" setup>
import checkValidator from "~/utils/validator/index";import {ElInput,ElSelect,ElDatePicker,ElCheckbox,ElRadio,ElRadioGroup,ElCheckboxGroup,ElSwitch,
} from "element-plus";const componentMap = {ElInput: ElInput,ElSelect: ElSelect,ElDatePicker: ElDatePicker,ElCheckbox: ElCheckbox,ElRadio: ElRadio,ElRadioGroup: ElRadioGroup,ElCheckboxGroup: ElCheckboxGroup,
};const props = defineProps({schema: Object,modelValue: [String, Number, Boolean, Array, Date, Object],
});
const emit = defineEmits(["update:modelValue"]);
const currentValue = computed({get: () => props.modelValue,set: (val) => emit("update:modelValue", val),
});const currentSchema = computed(() => {const schema = {};for (const key in props.schema) {let { visible = true, ...item } = props.schema[key];// 动态表单的组件名item.componentName = componentMap[item.componentName];// 是否显示visible =typeof visible !== "function" ? visible : visible(currentValue, item);if (visible) {schema[key] = { clearable: true, ...item };}// 表单验证规则if (schema[key].validator && schema[key].validator.length) {if (!schema[key].rules) schema[key].rules = [];schema[key].validator?.forEach(([valida, args]) => {if (checkValidator[valida]) {schema[key].rules.unshift(checkValidator[valida](args));}});}}return schema;
});
const dymanicForm = ref(null);
const validate = (func) => {if (typeof func === "function") {dymanicForm.value.validate((valid) => {func(valid);});} else {return new Promise((resolve) => {dymanicForm.value.validate((valid) => {resolve(valid);});});}
};
const resetFields = () => {dymanicForm.value.resetFields();
};defineExpose({resetFields,validate,
});
</script>

2. 调用组件示例

<template><div class=""><DymanicFormref="formRef":inline="true":schema="schema"v-model="searchValue"><el-form-item><el-button type="primary" @click="handleQuery">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item></DymanicForm></div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import type { ItemSchema } from "~/types/dymanic";
import DymanicForm from "~/components/DymanicForm.vue";const formRef = ref<InstanceType<typeof DymanicForm>>();
const schema = ref<ItemSchema>({userId: {formItem: {label: "用户ID:",},style: {width: "200px",},componentName: "ElInput",placeholder: "请输入用户ID",maxlength: 20,validator: [["checkRequired",{msg: "用户ID不能为空",},],],},username: {formItem: {label: "账号:",},style: {width: "200px",},componentName: "ElInput",placeholder: "请输入账号",maxlength: 20,},name: {formItem: { label: "用户名:" },style: {width: "200px",},componentName: "ElInput",placeholder: "请输入用户名",maxlength: 20,},
});
const searchValue = reactive({userId: "",username: "",name: "",
});
const handleQuery = () => {formRef.value.validate((valid: boolean) => {if (valid) {console.log("查询", searchValue);// 查询逻辑}});
};const handleReset = () => {formRef.value.resetFields();
};
</script>
<style lang="scss" scoped></style>

3. 校验规则示例

// 校验内容不能为空的验证
const checkRequired = ({ msg, trigger = ['blur'] }) => {return {required: true,message: msg,trigger,}
}export default checkRequired

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

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

相关文章

python_1

要求&#xff1a; 代码&#xff1a; # 先将分钟数转化成年数&#xff0c;再将余数做为天数 minute float(input("请输入分钟数&#xff1a;")) year_1 (minute / 60 / 24) // 365 day_1 (minute / 60 / 24) % 365 now f"{minute}分钟{year_1}年{day_1}天&q…

Cocos2dx-lua ScrollView[三]高级篇

一.概述 本文缩写说明:sv = ScrollView, cell代表ScrollView的一个子节点 本文介绍sv的一种封装类库,来实现快速创建sv,有如下几个优点: 1.item的位置通过参数控制,提高开发效率 2.免去了调用sv的API,提高开发效率 3.分帧创建,提高性能 4.可通过参数控制,复用ite…

Nginx超详细讲解+实操

前言 nginx作为当今火爆的、高性能的http及反向代理服务&#xff0c;不管前端还是后端&#xff0c;都需要全面去了解&#xff0c;学习&#xff0c;实操。 nginx 介绍 为了有一个全面的认知&#xff0c;接下来我们先来看看nginx的架构以及一些特点。 nginx 特点 处理响应请…

QT(C++)-error LNK2038: 检测到“_ITERATOR_DEBUG_LEVEL”的不匹配项: 值“2”不匹配值“0”

1、项目场景&#xff1a; 在VS中采用QT&#xff08;C&#xff09;调试时&#xff0c;出现error LNK2038: 检测到“_ITERATOR_DEBUG_LEVEL”的不匹配项: 值“2”不匹配值“0”错误 2、解决方案&#xff1a; 在“解决方案资源管理器”中选中出现此类BUG的项目&#xff0c;右键-…

静态路由表学习实验

实验要求&#xff1a;各个pc设备可以通信&#xff0c;并且可以访问外网&#xff0c;假设R1已连接外网 拓扑结构 思路&#xff1a;配置pc机ip地址&#xff0c;子网掩码&#xff0c;和网关&#xff08;网关地址是上层路由接口的地址&#xff09;&#xff0c;配置路由各个接口地址…

什么是LLM Agent?

引言&#xff1a; LLM Agent 已经成为大语言模型中最有价值的探索方向&#xff0c;也更趋于最前沿的通用人工智能。构建企业自己的 LLM Agent 有助于企业在最前沿的人工智能领域探索具有完全自主性的智能化能力&#xff0c;包括基于企业知识库、企业工具 API&#xff08;如&am…

element-plus中的日期时间选择器el-date-picker;日期选择面板中选定起始与结束的日期只能改具体的时刻,日期默认是一个月没法动态修改问题

目前遇到一个问题&#xff0c;在使用element-plus中的日期时间选择器el-date-picker&#xff0c;type为datetimerange时&#xff0c;展示的日期选择面板有两个输入框&#xff0c;开始时间和结束时间&#xff0c;element-plus只提供了default-time 使用datetimerange进行范围选择…

Visio中存在问题的解决方法

公式缩放 mathtype公式在visio缩放之后&#xff0c;出现了变形。 解决方法&#xff1a;每次输入公式都通过 插入->对象->mathType Equation 新建一个公式。可以避免 注&#xff1a;网上有的说在word中使用mathtype编写公式&#xff0c;之后复制到visio中。 插入波形 选择…

LinkedIn 互联网架构扩展简史

LinkedIn成立于 2003 年&#xff0c;其目标是连接到您的网络以获得更好的工作机会。第一周只有 2,700 名会员。时间快进了很多年&#xff0c;LinkedIn 的产品组合、会员基础和服务器负载都取得了巨大的增长。 如今&#xff0c;LinkedIn 在全球运营&#xff0c;拥有超过 3.5 亿会…

fuzzywuzzy,一个好用的 Python 库!

目录 前言 安装 基本功能 1. 字符串相似度比较 2. 模糊匹配与排序 实际应用场景 1. 数据清洗 2. 文本匹配与搜索 3. 搜索引擎优化 总结 前言 大家好&#xff0c;今天为大家分享一个好用的 Python 库 - fuzzywuzzy Github地址&#xff1a;https://github.com/seatgeek/fu…

企业如何乘上跨境电商的风口?

近年来&#xff0c;国内跨境电商成为内贸外贸发展的一个亮点&#xff0c;国家工作会议也提出&#xff1a;“要加快培育外贸新动能&#xff0c;巩固外贸外资基本盘&#xff0c;拓展中间品贸易、服务贸易、数字贸易、跨境电商出口”。多因素推动下&#xff0c;使得跨境电商成为我…

使用pytorch构建一个无监督的深度卷积GAN网络模型

本文为此系列的第二篇DCGAN&#xff0c;上一篇为初级的GAN。普通GAN有训练不稳定、容易陷入局部最优等问题&#xff0c;DCGAN相对于普通GAN的优点是能够生成更加逼真、清晰的图像。 因为DCGAN是在GAN的基础上的改造&#xff0c;所以本篇只针对GAN的改造点进行讲解&#xff0c;其…

Python算法100例-4.6 歌星大奖赛

完整源代码项目地址&#xff0c;关注博主私信源代码后可获取 1.问题描述2.问题分析3.算法设计4.确定程序框架5.完整的程序6.问题拓展7.知识点补充 1&#xff0e;问题描述 在歌星大奖赛中&#xff0c;有10个评委为参赛的选手打分&#xff0c;分数为1&#xff5e;100分。选手最…

Spring Cloud+Spring Alibaba笔记

Spring CloudSpring Alibaba 文章目录 Spring CloudSpring AlibabaNacos服务发现配置中心 OpenFeign超时机制开启httpclient5重试机制开启日志 SeataSentinel流量控制熔断降级热点控制规则持久化集成 OpenFeign集成 Gateway MicrometerZipKinGateway路由断言过滤器 Nacos 服务…

TikTok养号保姆级教程:学好这9招,你就是流量宠儿!

01 什么是养号&#xff1f; 在回答这个问题之前&#xff0c;我们首先要明白Tiktok智能推荐机制&#xff0c;也就是著名TikTok算法。 每个创作者发布视频时&#xff0c;TikTok都会根据视频内容、视频发布地区、标题内容进行特征识别&#xff0c;来判断视频可能会有哪些人群喜欢…

鱼哥赠书活动第14期:看完这本《数字化运维》掌握数字化运维方法,构建数字化运维体系

鱼哥赠书活动第14期&#xff1a;看完这本《数字化运维》掌握数字化运维方法&#xff0c;构建数字化运维体系 主要内容&#xff1a;读者对象&#xff1a;赠书抽奖规则:往期赠书福利&#xff1a; 数字化转型已经成为大势所趋&#xff0c;各行各业正朝着数字化方向转型&#xff0c…

SpringBoot3集成PostgreSQL

标签&#xff1a;PostgreSQL.Druid.Mybatis.Plus&#xff1b; 一、简介 PostgreSQL是一个功能强大的开源数据库系统&#xff0c;具有可靠性、稳定性、数据一致性等特点&#xff0c;且可以运行在所有主流操作系统上&#xff0c;包括Linux、Unix、Windows等。 通过官方文档可以…

MySQL数据库高级语句

文章目录 MySQL高级语句older by 排序区间判断查询或与且&#xff08;or 与and&#xff09;嵌套查询&#xff08;多条件&#xff09;查询不重复记录distinctcount 计数限制结果条目limit别名as常用通配符嵌套查询&#xff08;子查询&#xff09;同表不同表嵌套查询还能用于删除…

C语言例4-36:求Fibonacci数列的前40个数

教材优化代码如下&#xff1a; //求Fibonacci数列的前40个数 #include<stdio.h> int main(void) {long int f11,f21;int i1;for(;i<20;i){printf("%15ld%15ld",f1,f2);if(i%20)printf("\n");f1f2;f2f1;}return 0; } 结果如下&#xff1a; 我的基…