form表单封装button封装的两种方式

1.插槽方式

 //子组件
<el-form-item :class="isCustom?'custom-form-item':''"><div v-for="(item,index) in btnList" :key="index"><slot :item="item" :formRef="formRef"><FormButton:formData="modelForm":editable="editable":data="item"@onClick="onClick(item)"></FormButton></slot></div></el-form-item><script>
function onClick(data) {console.log(data.onClick,"data.onClick");if (!data.onClick) return;emit(data.onClick, props.modelForm.value);
}// 表单校验
async function validate() {if (!formRef.value) return;const result = await formRef.value.validate();return result;
}// 清除表单验证
async function resetFields() {if (!formRef.value) return await formRef.value.resetFields();return await formRef.value.resetFields();
}
</script>

父组件

      <com-form :data="userSearchConfig.formItems" :modelForm="searchForm":btnList="userSearchConfig.buttons"><template v-slot:default="{item, formRef}"><el-button :type="item.type" @click="item.onClick(formRef)">{{item.name}}</el-button></template></com-form><script>
const btnList = userSearchConfig.value.buttons ? userSearchConfig.value.buttons : {};
// 查询用户
const onSubmit = async (formRef) => {if (!formRef) return;await formRef.validate((valid, fields) => {if (valid) {getUserData(searchForm);}});
};
// 重置表单
const onReset = (formRef) => {formRef.resetFields();
};
btnList.forEach(item=>{if(item.onClick === 'onSubmit'){item.onClick = onSubmit}if(item.onClick === 'onReset'){item.onClick = onReset}
})
</script>

2.$emit方式:

              <FormButton:formData="modelForm":editable="editable":data="item"@onClick="onClick(item)"></FormButton>
      <com-form ref="formRef" :data="userSearchConfig.formItems" :modelForm="searchForm":btnList="userSearchConfig.buttons" @onReset="onReset(formRef)" @onSubmit="onSubmit(formRef)"></com-form><script>
// 查询用户
const formRef = ref();const onSubmit = async () => {formRef.value.validate();let valid = formRef.value.validate();if(valid) await getUserData(searchForm);
};
// 重置表单
const onReset = () => {formRef.value.resetFields();
};
btnList.forEach(item=>{if(item.onClick === 'onSubmit'){item.onClick = onSubmit}if(item.onClick === 'onReset'){item.onClick = onReset}
})
</script>

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

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

相关文章

【Python】使用execute(sql)执行insert之后没有插入数据

在sql为insert语句&#xff0c;用Python的sqlalchemy模块中的execute()执行之后没有插入数据的情况&#xff0c;主要是因为sqlalchemy版本的更新&#xff0c;不能直接只用execute()了&#xff0c;MySQL数据库连接的配置和sql都需要多处理一步&#xff1a; 之前的版本&#xff…

matlab处理数据,两行相同共有多行如何将重复的去掉

有一个36001x10的数据&#xff0c;我如何删除奇数行变成18001x10 data rand(36001, 10); % 举例&#xff1a;使用随机数据 % 删除奇数行 data_even_rows data(2:2:end, :&#xff09;; % 如果你想保留大小为 18001x10 的矩阵&#xff0c;可以进行如下操作&#xff1a; da…

【OpenCV】图像上绘制文字cv2.putText()函数用法,添加倾斜透明水印

图像上绘制文字 1. 概述2. cv2.putText()函数参数3. 图像上绘制非中文文字4. 图像上绘制中文文字5. 图片上添加倾斜透明文字水印 1. 概述 在OpenCV中&#xff0c;调用cv2.putText()函数可添加文字到指定位置&#xff0c;对于需要在图片中加入文字的场景提供了一种比较直接方便的…

开源编译器LLVM-源码编译

1.编译参考 详细的cmake编译选项&#xff0c;参考&#xff1a;Building LLVM with CMake — LLVM 18.0.0git documentation 2.编译脚本 utils.bash build-llvm.sh 依赖 utils.bash 脚本 #!/usr/bin/env bashCOLOR_FATAL$\033[41;38m COLOR_ERROR$\033[1;31m COLOR_WARN$\03…

Git多库多账号本地SSH连接配置方法

Git多库多账号本地SSH连接配置方法 一、前言二、环境三、帮助文档四、多环境配置4.1 配置config文件 五、生成RSA秘钥对5.1 ssh秘钥位置5.2 生成秘钥对&#xff08;公钥、私钥&#xff09;5.3 添加公钥到GIT用户配置中 六 测试git是否可以使用七、总结 一、前言 在使用Git管理…

qt QString字符串常用转换

QString字符串转换类型,常见的有: 1. const char*初始化QString.即const char*类型转QString字符串类型. QString str("肖战");qDebug() <<str; 2. QChar数组初始化QString.即QChar字符数组转QString字符串. QChar cHello[5] {H,e,l,l,o};QString strHell…

nodejs+vue+elementui足球篮球联赛系统

系统主要是以后台管理员管理为主。管理员需要先登录系统然后才可以使用本系统&#xff0c;管理员可以对个人中心、用户管理、赛事信息管理、球队信息管理、球员信息管理、比赛分值板管理、系统管理等进行添加、查询、修改、删除&#xff0c;以保障足球联赛管理系统的正常运行。…

spring Cloud在代码中如何应用,erueka 客户端配置 和 服务端配置,Feign 和 Hystrix做高可用配置

文章目录 Eureka一、erueka 客户端配置二、eureka 服务端配置 三、高可用配置FeignHystrix 通过这篇文章来看看spring Cloud在代码中的具体应用&#xff0c;以及配置和注解&#xff1b; Eureka 一、erueka 客户端配置 1、Eureka 启禁用 eureka.client.enabledtrue 2、Eurek…

【python程序】把小于10的数值都变成1

【python程序】把小于10的数值都变成1 import numpy as np import xarray as xra xr.DataArray(np.arange(25).reshape(5, 5)) a[np.where(a < 10)] 1 print(a)

对百度搜索页面设计的测试用例设计

测试百度搜索页面设计时&#xff0c;可以设计多种测试用例来确保页面的功能、性能和用户体验。以下是一些可能的测试用例&#xff1a; 搜索框功能测试&#xff1a; 输入有效关键字&#xff0c;验证搜索结果是否正确显示。输入无效关键字或特殊字符&#xff0c;验证系统是否给出…

公网穿透和RTC

RTC RTC 是 Real-Time Communication 的简写&#xff0c;正如其中文名称 “即时通讯” 的意思一样&#xff0c;RTC 协议被广泛用于各种即时通讯领域&#xff0c;诸如&#xff1a; 在线教育&#xff1b;直播中的主播连麦 PK&#xff1b;日常生活的音视频电话&#xff1b;.....…

Filebeat 部署

目录 &#xff08;1&#xff09;下载 &#xff08;2&#xff09;解压 &#xff08;3&#xff09;修改配置 &#xff08;4&#xff09;启动 &#xff08;5&#xff09;配置nginx 为什么用 Filebeat &#xff0c;而不用原来的 Logstash 呢&#xff1f; 原因很简单&#xff0c…

Python基础语法之学习type()函数

Python基础语法之学习type函数 一、代码二、效果 查看数据类型或者说查看变量存储的数据类型 一、代码 print(type("文本")) print(type(666)) print(type(3.14))二、效果 梦想是生活的指南针&#xff0c;坚持追逐梦想&#xff0c;终将抵达成功的彼岸。不要害怕失败…

深度学习中的Transformer机制

Transformer 是一种深度学习模型结构&#xff0c;最初由Vaswani等人于2017年提出&#xff0c;用于自然语言处理任务&#xff0c;尤其是机器翻译。Transformer 引入了自注意力机制&#xff08;self-attention mechanism&#xff09;&#xff0c;这是其在处理序列数据时的关键创新…

什么是终端服务器

什么是终端服务器 服务器的种类非常多&#xff0c;除了最为常用的wed服务器之外&#xff0c;还有高防服务器、缓存服务器以及终端服务器。什么是终端服务器&#xff0c;终端服务器有哪些工作方式&#xff1f; 终端服务器 什么是终端服务器终端服务器可以用在局域网上将很多终…

ESP32-Web-Server编程-JS 基础 1

ESP32-Web-Server编程-JS 基础 1 概述 前述分别在 HTML 基础 和 CSS 基础 中介绍了 HTML、CSS 的基本内容。HTML 定义了网页中包含哪些对象&#xff0c;CSS 定义了对象的显示样式。JavaScript(LiveScript)是一种运行于客户端的解释性脚本语言&#xff0c;使 HTML 页面更具动态…

多线程04 死锁,线程可见性

前言 前面我们讲到了简单的线程安全问题以及简单的解决策略 其根本原因是cpu底层对线程的抢占式调度策略,随机调度 其他还有一些场景的问题如下 1.多个线程同时修改一个变量问题 2.执行的操作指令本身不是原子的 比如自增操作就分为三步,加载,自增,保存 3.内存可见性问题 4.指令…

9.增删改操作

目录 一、插入操作 1、为表的所有字段插入数据 2、为表的指定字段插入数据 3、同时插入多条记录 4、将查询结果插入表中&#xff1a; 二、更新操作 三、删除操作 四、练习题 一、插入操作 在使用数据库之前&#xff0c;数据库中必须要有数据&#xff0c;MYSQL中使INSE…

C语言中文网 - Shell脚本 - 11 - 执行Shell脚本(多种方法)

第1章 Shell基础&#xff08;开胃菜&#xff09; 11. 执行Shell脚本&#xff08;多种方法&#xff09; 上节我们编写了一个简单的 Shell 脚本&#xff0c;这节我们就让它运行起来。运行 Shell 脚本有两种方法&#xff0c;一种在新进程中运行&#xff0c;一种是在当前 Shell 进…

【李宏毅-元学习】

一、基本概念 1、元学习&#xff1a;学习如何学习&#xff0c;超参数调整 2、机器学习和元学习 机器学习&#xff1a;定义函数&#xff08;未知参数&#xff09;-定义损失函数-优化&#xff08;最小化损失函数&#xff09; 3、什么是元学习 机器学习通过三个步骤找到了学习算…