查看和编辑公用一个弹窗

原创已于 2023-04-10 10:01:44 修改 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-03-16 10:08:53 首次发布

全网看了一下，居然只有一篇文章详细讲解了怎么写。可能这是基础的知识，大家都会，不过这篇文章解决了我的问题，在此向作者致敬，本着做大做强的信念，我也分享一下。有问题可以向我留言

这是原作者：查看新增编辑共用一个弹窗_是阿狸的博客-优快云博客

--------------------------------------------------------------------------------------------------------------------------------------------------

效果：（输入框为禁用状态）

1.绑定

2.编辑和查看的方法(methods）

3. 4.在前端的api里

5.回到vue里

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lv-wentao

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

以element ui为例分析前端各种弹窗和对话框的使用场景与区别

程序员诚哥

01-18

7529

本文研究分析element ui 中的各种弹窗和对话框，包括了：Dialog 对话框，Drawer 抽屉，MessageBox 弹框，Popconfirm 气泡确认框，Message 消息提示，Notification 通知。同时说明了Dialog 对话框与Drawer 抽屉的区别、MessageBox和Dialog的区别以及Message消息提示与Notification通知的区别。

vue实现新增编辑共用一个弹窗

m0_56272227的博客

11-10

4427

vue实现新增编辑共用一个弹窗

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

查看新增编辑共用一个弹窗

m0_64707449的博客

02-20

415

重点在于:disabled="isSee"上。isSee默认false（如果有表单个别参数有要求设置为不可输入，即可和我如上代码一样重新定义一个变量）:disabled = true 为表单不可输入状态。这样即可实现表单可输入和不可输入两种状态。

公共弹窗组件实现方案

最新发布

MR_bailu的博客

04-30

544

【代码】公共弹窗组件实现方案。

vue中当详情、编辑共用一个弹出框时，怎么在详情中禁用所有可编辑的组件，在编辑中又能够启用它们

Keep__Me的博客

09-10

1082

一般情况下，查询、详情甚至新增，都是用的同一个弹出框，但是他们的要求可能不一样。比如查询时只允许查看，不允许编辑。我们应该如何实现，在详情中禁止组件编辑，而在编辑中又可以进行编辑呢？要在详情中禁用所有可编辑的组件，在编辑中又能够启用它们，我们可以使用条件控制渲染来实现。

Vue管理系统项目—添加和修改共用一个弹窗的骚操作（方法模块化封装，让你的代码提升n个档次）

weixin_45745641的博客

01-21

3464

前言在管理系统中，表格信息的添加和删除是经常写的操作，大部分人对于这两个功能的实现都是使用两个弹窗el-dialog来实现，今天教大家两个功能共用一个弹窗，并且共用一个方法，不同的操作只需要传入不同的参数便能实现效果。学会了这个骚操作，代码至少提升一个档次共用一个弹窗共用一个弹窗，我们只需要定义一个状态state，如果为真，则是添加；为假，则是修改 <el-dialog :title="state ? '添加学生信息' : '修改学生信息'" :visible.sync="dialogForm

vue新增编辑共用一个弹窗

03-09

好的，用户想在Vue项目中实现新增和编辑功能共用同一个弹窗组件，我需要提供最佳实践。首先，我应该考虑组件的复用性，确保弹窗可以根据不同模式显示不同的内容。用户可能希望点击“新增”按钮时弹窗是空的，而...

vue 弹框共用

qq_55961367的博客

06-11

961

父子组件之间传参，共用弹框/模态框

新建和编辑共用一个页面，怎么实现共同的弹窗代码用vue2

06-01

首先，定义一个弹窗组件，包括需要共用的弹窗代码，例如： ```vue  <slot name="header"></slot>  <slot></slot>  <slot name="footer"></...

vue3写一个弹窗功能并将结果渲染到页面上

2301_80636534的博客

06-07

903

2.想要将弹窗的值渲染到页面上并在页面上for循环每次输入的结果，将渲染的数组放入接口里，因为我的XX声明的是对象，但是转接口里是数组，所以我的思路是先用对象保存弹窗输入的内容，再将对象存入数组。这样的写法没有获取到想要的name，经过查找之后发现是没用使用i的原因，foreach后i代表了XX数组里面的值（foreach只能循环数组），下面应该i.id和i.name，这样就可以获取到啦。1）每次渲染到页面上的数据都显示的是第二次弹窗输入的数据。2）configure的数据没有按我想要的区分开。

VUE项目的新增和编辑使用同一个弹窗，出现关闭编辑弹窗然后打开新增弹会有验证提示问题

lichunjiang_的博客

01-27

2513

VUE项目的新增和编辑使用同一个弹窗，出现关闭编辑弹窗然后打开新增弹会有验证提示问题解决方法定义一个使用 this.$nextTickH函数的方法，大致它会在dom形成之后更新数据。 clearValidate() { const form: any = this.$refs['refName']; if (form) { this.$nextTick(() => { form.clearValidate(); }) } .

如何使用vue使同一个弹窗同时能实现添加和编辑

热门推荐

buzhidaoqoshaming的博客

05-07

3万+

怎么样安装node环境和构建vue项目这里我就不详细说明了。在node和vue的官方文档里都能找得到首先看一下我这个demo是什么样的在这个demo里面，新增和编辑这两个按钮使用的是同一个弹窗首先，这里有两个问题第一：编辑所在的这个组件和新增所在的这个组件这是两个子组件，怎么让编辑和新增同时使用一个弹窗第二：点击弹窗的确定按钮的时候怎么判断是新增的还是编辑的咱们先来解决第一个问题，两个子组件怎么使...

vue项目中编辑和新增用的是同一个弹窗，如何判断用户点击是编辑还是新增？

铁锤妹妹的博客

03-25

9703

1. 前言最近在做后台管理，一个页面中会用到多个弹窗，所以整合成一个弹窗就好，另外需要判断用户点击是编辑还是新增，相应的进行一些操作，这个问题也挺常见的，记录一下吧~ 新增弹窗编辑弹窗 2. 问题首先，这里有两个问题 1. 编辑所在的这个组件和新增所在的这个组件这是两个子组件，怎么让编辑和新增同时使用一个弹窗 2. 点击弹窗的确定按钮的时候怎么判断是新增的还是编辑的 3. 解决问题针对问题一：绑定title，在data里面定义dialogTitle为空，然后点击新增或者编辑弹窗之前给他赋值

32.vue中新增和编辑用同一组件情况下，解决两项分别可点击和不可点击问题

银河与猫的博客

12-18

2650

前言：最近项目开发中，有遇到需求如下图：即：在新增时只要求是否配置默认为否且不可点击，但编辑时就比较麻烦了，首先判断是否配置是“是”还是“否”，若“是”，则两个都不可点击，若“否”，则两个都可点击。 1.刚开始写代码时，实现新增时不可点击很简单直接在show_table这个父组件中声明一个变量去判断，当点新增，使其为true，点编辑，使其为false：然后在...

vue element-ui 常见的新增、编辑、查看公用同一个页面

weixin_50790427的博客

05-20

9451

vue 同时实现添加，编辑，查看,共用一个弹层 1.父组件代码篇（index.vue）页面结构如下： <template> <div class="JNPF-common-layout"> <el-table v-loading="listLoading" :data="list"> <el-table-column prop="jhmc" label="辨识评价计划名称" align="left" /> <el

vue 常见的新增、编辑、查看公用同一个页面

weixin_30877755的博客

05-29

1万+

用vue开发经常会碰到，一个功能的新增、编辑、查看公用同一个页面，如果是页面暂且不提。但是弹框，很多人会发现，如果是点击编辑，取消，再点新增，弹框上面是会有残留数据的，为什么会这样呢，因为在点编辑的时候数据渲染上去并没有清除，所以有数据，相信很多人也会解决，直接清空，但是不管一个个属性清空或者直接对象清空都不是很好的方法。所以建议用到ES6的浅拷贝Object.assign 转载于:...

vue中新增和编辑两个功能共用一个弹窗和弹窗确定按钮，调用接口的处理方式（一）--- 同一个vue页面

weixin_43312391的博客

04-20

9838

实现目标：点击新增和编辑按钮时出现同一个弹窗，但展示信息不同，分别对接新增和编辑接口。直观效果：前端页面中的新增和编辑按钮点击新增按钮出现的弹框：点击编辑出现的弹框：新增和编辑均是通过确定按钮来对接接口。后端swagger： api下的js文件： // 新增 export function insertMaterial(param) { return request({ url: '/xxxx/xxxxx/insert', .

vue 给form表单赋值_vue 编辑和添加共用一个弹框时，编辑的时候已经给表单赋值了，再点击添加的时候表单已经有值了，怎么点添加时恢复到初始的状态呢？...

weixin_40005454的博客

12-20

1285

this.$refs[name].validate(valid => {if(valid && this.formValidate.Id == undefined || this.formValidate.Id == "") {//存课包明细信息localStorage.setItem("DetailedPackage",JSON.stringify(this.Detaile...

js中showModalDialog和showModelessDialog的使用

涓涓细流，细水长流

09-26

286

js中showModalDialog和showModelessDialog的使用基本介绍： showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()方法用来创建一个显示...