基于elelemt-ui封装一个表单

子组件
searchForm

<template><el-formref="form":model="value":rules="rules":label-width="labelWidth":inline="inline"><el-form-itemv-for="field in fields":key="field.slot":label="field.label":prop="field.slot"><slot :name="field.slot"><el-inputv-if="!$slots[field.slot]"v-model="formValue[field.slot]"@input="updateValue(field.slot, $event)"/></slot></el-form-item><el-buttontype="primary"@click="submitForm">搜索</el-button><el-button @click="resetForm">重置</el-button></el-form>
</template><script>
import {defineComponent, ref, watch,
} from 'vue';export default defineComponent({name: 'SearchForm',props: {value: {type: Object,default: () => ({}),},fields: {type: Array,default: () => [],},rules: {type: Object,default: () => ({}),},labelWidth: {type: String,default: '100px',},inline: {type: Boolean,default: true,},},setup(props, { emit }) {const form = ref(null);const formValue = ref({ ...props.value });watch(() => props.value, (newValue) => {formValue.value = { ...newValue };}, { deep: true });const submitForm = () => {form.value.validate((valid) => {if (valid) {emit('submit', props.value);} else {console.log('error submit!!');return false;}});};const resetForm = () => {form.value.resetFields();emit('reset');};const updateValue = (key, value) => {emit('input', {...formValue.value,[key]: value,});};return {form,formValue,submitForm,resetForm,updateValue,};},
});
</script>
<style scoped>
v-deep .el-button--primary{margin: 0;
}
</style>

父组件

            html<p>父{{ searchFormModel }}</p><search-formref="searchFormRef"v-model="searchFormModel":fields="searchFromFields":rules="rules"@submit="onSearchFormSubmit"@reset="onSearchFormReset"><template #ruleId><el-selectv-model="searchFormModel.ruleId"placeholder="请选择活动区域"><el-optionlabel="区域一"value="shanghai"/><el-optionlabel="区域二"value="beijing"/></el-select></template><template #type><el-checkbox-group v-model="searchFormModel.type"><el-checkboxlabel="美食/餐厅线上活动"name="type"/><el-checkboxlabel="地推活动"name="type"/><el-checkboxlabel="线下主题活动"name="type"/><el-checkboxlabel="单纯品牌曝光"name="type"/></el-checkbox-group></template></search-form>// 引入import searchForm from './searchForm';// 注册components: {searchForm,},setup() {const initData = reactive({searchFormModel: {categoryIds: '666',ruleId: '',type: [],},searchFromFields: [{ label: '活动名称', slot: 'categoryIds' },{ label: '活动区域', slot: 'ruleId' },{ label: '活动性质', slot: 'type' },],rules: {categoryIds: [{ required: true, message: '请输入用户名', trigger: 'blur' },],ruleId: [{ required: true, message: '请选择活动区域', trigger: 'change' },],type: [{type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change',},],},searchFormRef: null,});const onSearchFormSubmit = (form) => {console.log('表单提交了', form);};const onSearchFormReset = () => {console.log('表单重置了');// initData.searchFormRef.resetFields();};

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

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

相关文章

基于5G网络的智能车间MES设计方案

导读 在数字化转型建设过程中&#xff0c;机械制造企业的难点是智能车间的设计。随着5G技术的发展&#xff0c;大量的带网络接口的智能设备的投入使用&#xff0c;智能车间的实施成为可能。本文从车间生产计划调度、过程管控、设备管理、质量管理、能耗管理和物流仓储等方面提…

[网鼎杯 2020 朱雀组]Nmap 通过nmap写入木马 argcmd过滤实现逃逸

这道题也很好玩 啊 原本以为是ssrf 或者会不会是rce 结果是通过nmap写入木马 我们来玩一下 传入木马 映入眼帘是nmap 我们首先就要了解nmap的指令 Nmap 相关参数-iL 读取文件内容&#xff0c;以文件内容作为搜索目标 -o 输出到文件-oN 标准保存-oX XML保存-oG Grep保存-oA…

埃文科技受邀出席“安全堤坝”技术论坛

2023年9月11日&#xff0c;2023年国家网络安全宣传周河南省活动开幕式暨河南省网络文明大会在开封博物馆开幕。由CCF YOCSEF郑州举办的“聚焦数据交易监管技术&#xff0c;筑牢数据交易‘安全堤坝’”技术论坛在开封市博物馆二楼会议厅举行。埃文科技总经理王永博士与副总经理武…

如何让照片动起来?几个制作方法和注意事项分享

在现代社交媒体的时代&#xff0c;我们经常会看到一些有趣、生动的动态照片。那么小伙伴们知道如何让照片动起来吗&#xff1f;下面将分享几个简单的制作方法和注意事项。 1.使用书单视频王&#xff1a;我们在手机中打开这款应用&#xff0c;进入首页后可以看到照片动起来功能&…

自动化办公更简单了:新版python-office,有哪些更新?

#职场经验谈# 大家好&#xff0c;这里是程序员晚枫&#xff0c;小破站/小红薯都叫这个名。 去年4月开源了一个Python自动化办公项目&#xff1a;python-office&#xff0c;GitHub和Gitee都能看到。1行代码实现复杂的自动化办公任务&#xff0c;帮助不懂代码的小白&#xff0c;…

oppo手机换荣耀手机,便签数据怎么搬家?

有不少网友之前使用的是OPPO手机&#xff0c;但是在使用了三四年之后就需要再次更换手机了&#xff0c;这时候一部分用户会选择更换相同品牌的OPPO手机&#xff0c;还有一部分用户会选择使用其他品牌的手机&#xff0c;例如小米、荣耀、华为等品牌。有的网友表示自己从OPPO手机…

Redis新篇一:认识Redis

首先&#xff0c;很抱歉小伙伴们&#xff0c;前段时间一直都没有更新&#xff0c;我很抱歉&#xff0c;现在开始持续更新Redis相关内容啦&#xff01;有需要的小伙伴们可以持续关注一下小博主的新篇哦~ 希望对你们有帮助&#xff01; 作者&#xff1a;爱撸猫的程序员 博客地址…

基于CNN-LSTM的时序预测MATLAB实战

一、算法原理 1.1 CNN原理 卷积神经网络具有局部连接、权值共享和空间相关等特性。卷积神经网络结构包含卷积层、激活层和池化层。 &#xff08;a&#xff09;二维卷积层将滑动卷积滤波器应用于输入。该层通过沿输入垂直和水平方向 移动滤波器对输入进行卷积&#xff0c;并计…

数据结构——线性表之顺序表

目录 一.线性表 二.顺序表实现 2.1 概念及结构 2.2 动态顺序表 2.2.1 初始化与销毁函数 2.2.2 打印函数 2.2.3 尾插函数 2.2.4 尾删函数 2.2.5 扩容函数 2.2.6 头插函数 2.2.7 头删函数 2.2.8 任意位置插入函数 2.2.9 查找函数 2.2.10 任意位置删除函数 2.2.11 修…

SSM - Springboot - MyBatis-Plus 全栈体系(七)

第二章 SpringFramework 四、SpringIoC 实践和应用 3. 基于 注解 方式管理 Bean 3.4 实验四&#xff1a;Bean 属性赋值&#xff1a;基本类型属性赋值&#xff08;DI&#xff09; Value 通常用于注入外部化属性 3.4.1 声明外部配置 application.properties catalog.nameM…

最新在线IDE流行度最新排名(每月更新)

2023年09月在线IDE流行度最新排名 TOP 在线IDE排名是通过分析在线ide名称在谷歌上被搜索的频率而创建的 在线IDE被搜索的次数越多&#xff0c;人们就会认为它越受欢迎。原始数据来自谷歌Trends 如果您相信集体智慧&#xff0c;那么TOP ODE索引可以帮助您决定在软件开发项目中…

golang 自动生成文件头

安装koroFileHeader控件 打开首选项&#xff0c;进入设置&#xff0c;配置文件头信息"fileheader.customMade": {"Author": "lmy","Date": "Do not edit", // 文件创建时间(不变)// 文件最后编辑者"LastEditors"…

0018Java程序设计-springboot智慧环卫养管作业平台

文章目录 摘 要目 录系统设计开发环境 摘 要 本智慧环卫养管作业平台就是建立在充分利用现在完善科技技术这个理念基础之上&#xff0c;并使用IT技术进行对环卫养管作业的管理&#xff0c;从而保证环卫养管作业能够高效的进行&#xff0c;可以实现环卫养管作业的在线管理&…

etcd之读性能主要影响因素

1、Raft模块-线性读ReadIndex-节点之间的RTT延时、磁盘IO 线性读时Follower节点首先会向Raft 模块发送ReadIndex请求&#xff0c;此时Raft模块会先向各节点发送心跳确认&#xff0c;一半以上节点确认 Leader 身份后由leader节点将已提交日志索引 (committed index) 封装成 Rea…

PyTorch安装

PyTorch 根据自己的需求选择&#xff0c;然后复制命令&#xff0c;运行

招商信诺人寿基于 Apache Doris 统一 OLAP 技术栈实践

本文导读&#xff1a; 当前&#xff0c;大数据、人工智能、云计算等技术应用正在推动保险科技发展&#xff0c;加速保险行业数字化进程。在这一背景下&#xff0c;招商信诺不断探索如何将多元数据融合扩充&#xff0c;以赋能代理人掌握更加详实的用户线索&#xff0c;并将智能…

Java的序列化

写在前面 本文看下序列化和反序列化相关的内容。 源码 。 1&#xff1a;为什么&#xff0c;什么是序列化和反序列化 Java对象是在jvm的堆中的&#xff0c;而堆其实就是一块内存&#xff0c;如果jvm重启数据将会丢失&#xff0c;当我们希望jvm重启也不要丢失某些对象&#xff…

Word 自动编号从10 以后编号后面的空白很大

目录 1、打开Word&#xff0c;选中需要修改的行。 2、点击鼠标右键&#xff0c;选择调整列表缩进一项&#xff0c;弹出对话框。 3、弹出对话窗口里将编号之后里面的选项&#xff0c;改成不特别标注。 4、点击确定&#xff0c;可以看到效果。 多余的缩进已经没有了。至此&…

Linux搭建Apache(秒懂超详细)

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️努力不一定有回报&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xf…

嵌入式单片机上练手的小型图形库

大家好&#xff0c;今天分享一款小型的图形库。 Tiny Graphics Library&#xff1a; http://www.technoblogy.com/show?23OS 这个小型图形库提供点、线和字符绘图命令&#xff0c;用于 ATtiny85 上的 I2C 128x64 OLED 显示器. 它通过避免显示缓冲器来支持RAM有限的处理器&…