vue3大事件项目3

弹框验证

先准备变量:

const formModel = ref({

  cate_name: '',

  cate_alias: ''

})

还有规则:

const rules = {

  cate_name: [

    { required: true, message: 'please input name', trigger: 'blur' },

    {

      pattern: /^\S{1,10}$/,

      message: 'must be 1-10',

      trigger: 'blur'

    }

  ],

  cate_alias: [

    { required: true, message: 'please input second name', trigger: 'blur' },

    {

      pattern: /^[a-zA-Z0-9]{1,15}$/,

      message: 'must be 1-15 number or aphlet',

      trigger: 'blur'

    }

  ]

}

1. form表单绑定变量和规则:<el-form :model="formModel" :rules="rules">

2.input框配置  v-model

 <el-input 

          v-model="formModel.cate_alias"

        ></el-input>

3. el-form-item标签配置prop,用于接收参数<el-form-item label="分类别名" prop="cate_name">

prop用于指定表单项所对应的Vue实例数据对象中的属性名。当你需要在表单提交时获取或验证表单项的值,就需要用到prop属性。

编辑需要回显,表单数据需要初始化

编辑时,数据回显

添加时为空

封装的组件当中

//组件对外暴露一个方法open,基于open传来的参数,区分是添加还是编辑
//open({}) => 表单没有渲染,说明是添加
//open({id,cate_name,...}) => 表单需要渲染,说明是编辑
//open调用后,可以打开弹窗
const open = (row) => {dialogVisible.value = true// formModel.value展开//添加 -> 传空值,相当于重置表单内容//编辑 -> 存储需要回显的数据formModel.value = { ...row }
}

基于传过来的表单数据,进行标题控制,有 id 的是编辑,没有的是添加,注意最外层加双引号

 <el-dialogv-model="dialogVisible":title="formModel.id ? 'edit' : 'add'">

添加或编辑完成后提交数据

1.封装接口:添加文章分类,post和编辑文章分类,put

//添加文章分类,post
export const artaddChannelService = (data) => request.post('/my/cate/add', data)
//编辑文章分类,put
export const arteditChannelService = (data) =>request.put('/my/cate/info', data)

2.为按钮绑定点击事件onSubmit

     <el-button type="primary" @click="onSubmit"> Confirm </el-button>

3.封装onSubmit

先校验,之后判断open方法有没有传id过来,有就是编辑,没有就是添加

const onSubmit = async () => {//校验,检验通过就执行下一步await formRef.value.validate()const isEdit = formModel.value.idif (isEdit) {await arteditChannelService(formModel.value)ElMessage.success('success edit')} else {await artaddChannelService(formModel.value)ElMessage.success('success add')}
}

4.在channelEdit里导入封装好的接口

import { arteditChannelService, artaddChannelService } from '@/api/article.js'

5.效果

6.备注:如果弹框不出现,就在最上面导入

import 'element-plus/dist/index.css'

7.关弹层

 //关弹窗dialogVisible.value = false

8.通知父组件

defineEmits` 是一个组合 API,用于定义父组件可以监听的子组件事件。

const emit = defineEmits(['success'])

当前的Vue组件正在向其父组件发出一个名为 'success' 的自定义事件。

  //通知父组件emit('success')

为了响应这个事件,父组件需要在其模板中使用 v-on 指令(或者简写为 @)来监听这个事件。

父组件:调用子组件

  <channel-edit ref="dialog" @success="onSuccess"></channel-edit>

父组件:封装方法(getChannelList()是父组件已经封装好的方法)

const onSuccess = () => {getChannelList()
}

9.完成:可以成功添加或修改,并且自动渲染


​​​​​​​

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

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

相关文章

Java 基于微信小程序的智能停车场管理小程序

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Rust腐蚀服务器常用参数设定详解

Rust腐蚀服务器常用参数设定详解 大家好我是艾西&#xff0c;一个做服务器租用的网络架构师上期我们分享了rust腐蚀服务器的windows系统搭建方式&#xff0c;其中启动服务器bat参数因为涉及的东西比较多所以想通过这篇文章给大家做一下详细的分享。 &#xff08;注本文中xxxx…

浅述.Net中的Hash算法(顺带对称、非对称算法)

【写在前面】 对称加密算法(只有一个私钥&#xff0c;比如DES【不推荐】、AES)&#xff1b; 非对称加密算法&#xff08;公钥与私钥&#xff0c;比如RSA&#xff09;&#xff1b; Hash算法也称为散列函数算法&#xff0c;任意长度的数据都转换为固定长度的字符串&#xff08…

【自然语言处理八-transformer实现翻译任务-一(输入)】

自然语言处理八-transformer实现翻译任务-一&#xff08;输入&#xff09; transformer架构数据处理部分模型的输入数据(图中inputs outputs outputs_probilities对应的label)以处理英中翻译数据集为例的代码 positional encoding 位置嵌入代码 鉴于transfomer的重要性&#xf…

小猫爬山(c++题解)

题目描述 Freda和rainbow饲养了N只小猫&#xff0c;这天&#xff0c;小猫们要去爬山。经历了千辛万苦&#xff0c;小猫们终于爬上了山顶&#xff0c;但是疲倦的它们再也不想徒步走下山了&#xff08;呜咕>_<&#xff09;。 Freda和rainbow只好花钱让它们坐索道下山。索…

1.汉诺塔问题

C力扣 汉诺塔 class Solution { public:void hanota(vector<int>& a, vector<int>& b, vector<int>& c) {dfs(a,b,c,a.size());}void dfs(vector<int>& a, vector<int>& b, vector<int>& c,int n){if(n1){c.push…

阻塞队列和生产消费模型

阻塞队列 阻塞队列的概念 队列相信我们已经不陌生了 之前也学过很多队列 比如: 普通队列 和 优先级队列 两种 这两种队列都是线程不安全的 而我们讲的阻塞队列 刚好可以解决线程安全问题 也是先进先出 并且带有阻塞功能. 阻塞功能是怎么回事呢 就是如果入队的时候阻塞队列为…

rabbitmq安装rabbitmq-delayed-message-exchange插件

下载地址&#xff1a;Community Plugins | RabbitMQ 上传到rabbitmq安装目录的/plugins目录下 我的是/usr/lcoal/rabbitmq/plugins/ 直接安装 [rootk8s-node1 rabbitmq]# rabbitmq-plugins enable rabbitmq_delayed_message_exchange [rootk8s-node1 rabbitmq]# rabbitmq-pl…

pringboot2集成swagger2出现guava的FluentIterable方法不存在

错误信息 Description: An attempt was made to call a method that does not exist. The attempt was made from the following location: springfox.documentation.spring.web.scanners.ApiListingScanner.scan(ApiListingScanner.java:117) The following method did not ex…

《青少年成长管理2024》049 “成长目标:到哪儿了?”2/2

《青少年成长管理2024》049 “成长目标&#xff1a;到哪儿了&#xff1f;”2/2 六、规则和契约七、资源与欲望八、愚蠢与智慧九、奋勇争第一十、时代新节奏 本节摘要&#xff1a;当你来到这个世界&#xff0c;首先认识一下这是一个什么样的世界&#xff0c;你处于一个什么样的环…

c语言例题,求数组中最大值,99乘法口诀表

例题1&#xff1a;求出数组中最大的值 根据题意&#xff0c;我们知道的是需要从一个数组中找到一个最大的元素并且输出。那首先我们先建立一个数组&#xff0c;然后将一些不有序的整型元素放到数组中&#xff0c;然后再建立一个变量来存放数组中的第一个元素&#xff0c;通过一…

Linux学习 - 又双叒叕一个软件安装方法

Linux学习 - 又双叒叕一个软件安装方法 Conda包管理系统 Conda是一种通用包管理系统&#xff0c;旨在构建和管理任何语言的任何类型的软件。通常与Anaconda (集成了更多软件包&#xff0c;https://www.anaconda.com/download/#download)和Miniconda(只包含基本功能软件包, ht…

算法设计与分析实验报告c++实现(八皇后问题、连续邮资问题、卫兵布置问题、圆排列问题)

一、实验目的 1&#xff0e;加深学生对回溯法算法设计方法的基本思想、基本步骤、基本方法的理解与掌握&#xff1b; 2&#xff0e;提高学生利用课堂所学知识解决实际问题的能力&#xff1b; 3&#xff0e;提高学生综合应用所学知识解决实际问题的能力。 二、实验任务 用回溯…

vue简单使用五(组件的使用)

目录 如何定义组件&#xff1a; 组件的命名&#xff1a; 父组件向子组件传值&#xff1a; 子组件向父组件传值&#xff1a; 如何定义组件&#xff1a; 全局组件定义&#xff1a; 局部组件定义&#xff1a; 组件的基本使用&#xff1a; 打印结果&#xff1a; 组件的命名&#xf…

蓝桥杯真题有奖问答

小蓝正在参与—个现场问答的节目。活动中一共有30道题目,每题只有答对和答错两种情况,每答对—题得10分&#xff0c;答错—题分数归零。小蓝可以在任意时刻结束答题并获得目前分数对应的奖项&#xff0c;之后不能再答任何题目。最高奖项需要100分,所以到达100分时小蓝会直接停止…

分类预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络数据分类预测

分类预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络数据分类预测 目录 分类预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现OOA-BP鱼鹰算法优化BP神经网络多特征分类预测&#xff08;完整源码和数…

MATLAB Simulink仿真搭建及代码生成技术—01自定义新建模型模板

MATLAB Simulink仿真搭建及代码生成技术 目录 01-自定义新建模型模板点击运行&#xff1a;显示效果&#xff1a;查看模型设置&#xff1a; 01-自定义新建模型模板 新建模型代码如下&#xff1a; function new_model(modelname) %建立一个名为SmartAss的新的模型并打开 open_…

【微服务】------常见模型的分析与比较

DDD 分层架构 整洁架构 整洁架构又名“洋葱架构”。为什么叫它洋葱架构&#xff1f;看看下面这张图你就明白了。整洁架构的层就像洋葱片一样&#xff0c;它体现了分层的设计思想。 整洁架构最主要的原则是依赖原则&#xff0c;它定义了各层的依赖关系&#xff0c;越往里依赖越…

[大模型]Langchain-Chatchat安装和使用

项目地址&#xff1a; https://github.com/chatchat-space/Langchain-Chatchat 快速上手 1. 环境配置 首先&#xff0c;确保你的机器安装了 Python 3.8 - 3.11 (我们强烈推荐使用 Python3.11)。 $ python --version Python 3.11.7接着&#xff0c;创建一个虚拟环境&#xff…

Web前端-Ajax

Ajax 概念:Asynchronous JavaScript And XML,异步的JavaScript和XML。 作用: 1.数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。 2.异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等…