elementUI的弹框复用

最新推荐文章于 2024-08-11 16:20:52 发布

这就是我的昵称j

最新推荐文章于 2024-08-11 16:20:52 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/jiao0916/article/details/105973812

版权

本文介绍了如何在Vue.js项目中复用ElementUI的弹框组件，通过设置不同状态来实现添加和编辑功能。内容包括根据addType判断显示不同标题，点击调用时清空表单数据的方法，以及在弹框保存按钮的处理逻辑，分别处理录入和编辑的不同操作。

摘要由CSDN通过智能技术生成

1、要有一个区别方法的状态:

内容相同，为了节省代码，就可以使用同一个弹框，常见的情况有添加和编辑

如果addType是等于"add" 那么就让标题显示录入订单，如果不是就显示编辑订单

2.点击调用的时候,（记得清空内容）

tips:2.1:this.$nextTick(() =>{this.$refs.addOrderForm.clearValidate()}) 这个是清空弹框中的form

2.2:$refs 获取form的所有元素

3.点击弹框的保存按钮

如果是录入状态相关逻辑写在if的对象里，编辑的逻辑写在else里

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

这就是我的昵称j

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue-element解决重复弹窗的问题

Kätzchen-408的博客

08-12

2841

vue-element解决重复弹窗的问题封装引入使用封装封装message组件,在根目录下创建config/resetMessage.js: import { Message } from 'element-ui'; let messageInstance = null; const resetMessage = (options) => { if(messageInstance) { messageInstance.close() } message

Vue手写一个弹出框复用组件

weixin_45389051的博客

06-28

960

虽然现在UI框架很多有弹出框这个组件，但是自己写是不是更能体现自己的能力呢，样式也可以随意改变，哈哈，个人觉得是这样首先创建一个message文件,里面创建一个messageBox.vue <template> <div class="messageBox"> <h2>{{ title }}</h2> <p>{{ content }}</p> <div>

参与评论您还未登录，请先登录后发表或查看评论

ElementUI的Dialog弹窗实现拖拽移动功能

最新发布

weixin_58070962的博客

08-11

1073

ElementUI的Dialog弹窗实现拖拽移动功能

element 弹窗

H___mmm的博客

06-09

207

element 弹窗不能用v-model 得用:visible.sync

element——弹窗

weixin_41897680的博客

12-14

8056

本来以为弹窗挺简单的，结果自己想多了。这几天的使用碰到了好多问题。在组件中使用弹窗 <div id="app"> <el-button type="primary" @click="open=true">打开弹窗</el-button> <test :visible.sync="open" :table="tableData"></test> </div> <script type="text/javascript">

Element UI当添加和编辑共一个弹窗时

weixin_55753884的博客

03-16

830

【代码】Element UI当添加和编辑共一个弹窗时。

基于ElementUI封装了CRUD的弹框组件

小陈的博客

08-31

570

回头看自己以前的代码，感觉就像屎一样。我会想，为什么不封装一下，如果用的是ElementUI框架，也可以在此基础上进行二次封装。譬如说，这个用来对列表数据进行增删改查的弹框。

vue项目中仿element-ui弹框效果的实例代码

10-17

该实例代码展示了一个组件从创建到使用的整个过程，说明了如何将Element-UI中的弹框样式和功能复用到Vue项目中。同时，通过代码的封装和方法的定义，实现了一个可复用、可配置的弹框组件，这为其他类似场景提供了很...

elementUI前端CRUD页面

04-09

Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可复用的用户界面。"CRUD" 页面在Web开发中通常指的是创建（Create）、读取（Read）、更新（Update）和删除（Delete）...

elementui的el-dialog的二次封装

King Saj

07-04

873

el-dialog的二次封装

vue+elementui 实现新增和修改共用一个弹框

热门推荐

weixin_45369963的博客

08-21

1万+

一、新增 1、新增按钮 2、新增事件在methods中，用来打开弹窗， dialogVisible在data中定义使用有true或false来控制显示弹框 **3、新增确定，弹框确定事件，新增和修改共用一个确定事件，使用id区别 **3、新增事件调新增接口，判断是否有id，没有就调新增接口二、修改 2-1、修改按钮，表格行编辑按钮使用scope.row拿到当前行的数据 2-2、修改事件，把当前行数据赋值给表单，就把当前行数据回显出来了 2-3、修改事件修改接口，判断是否有id，

弹框的用法（element-ui）

weixin_52063946的博客

07-29

847

// 根据用户id删除用户 async removeUser(id) { const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).catch((err) => { return e..

ElementUi之dialog弹窗

Lydia

08-25

4824

ElementUi之dialog弹窗。

Elementui，通过Dialog，实现全局动态confirm自定义弹窗，不需要各页面单独引入组件（可显示页面、html、代码高亮显示、普通文字）

qq_40591925的博客

06-23

1万+

Elementui，通过el-dialog，实现confirm 弹窗

vue（父子组件）使用element弹窗功能

qq_44891434的博客

07-12

2218

vue（父子组件）使用element弹窗功能注意点注意使用父子组件传值的时候，props的值是单项的。所以说在做弹窗的时候我们需要先，父组件向子组件传值，然后子组件向父组件传值。父组件 <template> <div> <div class="displayVideo"> <template> <ul v-infinite-scroll="load" class="personalDiaplayLin

对话框复用

zhanghy_80的专栏

05-19

727

对话框复用

简单封装一个element弹窗

m0_56896206的博客

03-21

1493

简单封装一个element弹窗适合在脚本和js里调用或者在vue页面函数内调用 import Vue from 'vue' export default function(component, options = { dialog: {}}, cb) { return new Promise(async(resolve, reject) => { const dialog = { appendToBody: true, // 对话框遮罩层是否插入至 body 元素上

element——vue封装弹窗及注意事项

Juliet_xmj的博客

09-08

1745

element——vue封装弹窗及注意事项可在每页写单独样式或在封装文件中写统一样式 1. 弹窗脚部取消按钮可隐藏， 2. 按钮可实现loading效果， 3. 弹窗标题、脚部按钮内容、弹窗宽度都可以自定义第一种方法弊端：弹窗插件点击确定会默认调取弹窗右上角关闭事件，所以有时候关闭方法中的内容会替换确定方法中的内容，导致确定方法中调取接口时数据错误 1.1 封装 <template> <div class="all-dialog2"> <el-dia

el dialog多个弹框复用

09-19

在使用el-dialog组件时，可以通过多个弹框的复用来提高代码的复用性和可维护性。在使用el-dialog组件时，可以通过使用v-if或v-show指令来控制弹框的显示与隐藏。通过对弹框的数据进行不同的赋值，可以实现对不同的...