后台管理添加/编辑共用一个弹框的bug

最新推荐文章于 2023-02-20 15:48:24 发布
最新推荐文章于 2023-02-20 15:48:24 发布
阅读量170 收藏 1
点赞数
分类专栏： 笔记总结 文章标签： vue bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/withNanSi/article/details/115871158
版权

**bug:**在编辑时,只有第一次编辑时,才能正确显示.随后再点编辑,数据显示不正确了
**原因:**现在的代码中,获取详情这个动作在子组件的created中发出的,它只会执行一次,后续点击关闭弹层时,子组件没有被销毁
**解决方案:**在关闭弹层时,把子组件销毁
解决方案1:在标签上添加v-if
在这里插入图片描述

withNanSi
关注
专栏目录
vue电商后台管理系统—实现商品分类以及分类管理功能
Minnor的博客
06-15 5264
新建分支并推送到码云在component文件夹中新建一个goods文件夹存放商品管理相关组件，新建Cate.vue子组件；在router/index.js中导入子组件并定义子路由规则，注意，路径是浏览器地址栏中的路径名，这里是/categories，有几个新知识，比如自定义数据列tree-table，组件库中没有，官方文档在GitHub中；以及级联选择框等等...
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
查看新增编辑共用一个弹窗
m0_64707449的博客
02-20 301
重点在于:disabled="isSee"上。isSee默认false（如果有表单个别参数有要求设置为不可输入，即可和我如上代码一样重新定义一个变量）:disabled = true 为表单不可输入状态。这样即可实现表单可输入和不可输入两种状态。
编辑和新增共用弹框
qq_52441253的博客
05-23 650
编辑和新增共用一个弹框,下拉框中的选项不可以重复添加 <el-dialog :title="dialogTitle" center :visible.sync="addVisible" width="30%" :before-close="addClose"> <el-form ref="addForm" label-width="80px" :model="addLedgerData"> <el-form-item label="名称" prop="n
后台系统-新增和编辑共用一个弹框（基于vue和element-ui）
crystal_iwwish的博客
12-21 1283
如图所示： 点击新增角色和编辑会弹出一个弹框，弹框只写一个，如何实现共用同一结构，功能却不相同呢？ 首先给这两个按钮定义一个点击事件，事件名为openDialog 这里不同的是 给编辑这个按钮根据作用域插槽解构了一个row还有一个2，这个2就是我们区分编辑和新增的关键 这里的roleForm是上述table表格绑定的数据 ...
新增功能 编辑功能 数据回填 显示详情不准确的三种修复方式 控制统一弹窗 删除功能 表单校验
weixin_68531033的博客
06-23 567
扁平化数据处理树形结构续新增弹层的实现完善新增和编辑为一个弹窗新增状态 处理新增和编辑弹窗状态 给编辑部门添加事件 弹窗获取id 传给子组件 在子组件中 根据id获取单个部门信息 实现数据回填 做数据回填时，由于form已经做了v-model双向绑定，所以，这里直接赋值：，这样数据就回填了。图解 图解async为微任务微任务 =>dom加载 => 宏任务加$nextTick或setTimeout 将微任务转宏任务表单重新加载 重新获取数据 方法一 方法二 通过给组件添加ref $nextTick
利用Vue实现一个新增与修改共用的组件
Admin_yws的博客
04-23 2951
业务描述：新增与修改复用同一个组件（a-modal包裹的），表单数据需要缓存（离开该页面，再回到该页面，编辑的内容不会丢失） 使用的UI框架：ant-design-vue 页面长这样： 逻辑分析：首先该组件是被keep-alive缓存的，数据不会随页面切换而丢失的。我采用的办法如下： 1.如何区别是新增操作还是修改操作：①通过标识段区分是新增，还是修改；②通过传过的数据是否存在id来区别 2.编辑时如何赋值：我采用的是在显示时，父组件将数据传到子组件，在子组件保存起来，(注：这里需要拷贝一下，
SpringCloud电商项目开发完整流程
m0_67392931的博客
08-02 166
vue在新建.vue项目的时候可以选择模板，因此我们自定义一个模板可以事半功倍。点击自定义模板即可去自己定义。
如何使用vue使同一个弹窗同时能实现添加和编辑
buzhidaoqoshaming的博客
05-07 3万+
怎么样安装node环境和构建vue项目这里我就不详细说明了。在node和vue的官方文档里都能找得到首先看一下我这个demo是什么样的在这个demo里面，新增和编辑这两个按钮使用的是同一个弹窗首先，这里有两个问题第一：编辑所在的这个组件和新增所在的这个组件这是两个子组件，怎么让编辑和新增同时使用一个弹窗第二：点击弹窗的确定按钮的时候怎么判断是新增的还是编辑的咱们先来解决第一个问题，两个子组件怎么使...
Vue管理系统项目—添加和修改共用一个弹窗的骚操作（方法模块化封装，让你的代码提升n个档次）
weixin_45745641的博客
01-21 3317
前言 在管理系统中，表格信息的添加和删除是经常写的操作，大部分人对于这两个功能的实现都是使用两个弹窗el-dialog来实现，今天教大家两个功能共用一个弹窗，并且共用一个方法，不同的操作只需要传入不同的参数便能实现效果。学会了这个骚操作，代码至少提升一个档次 共用一个弹窗 共用一个弹窗，我们只需要定义一个状态state，如果为真，则是添加；为假，则是修改 <el-dialog :title="state ? '添加学生信息' : '修改学生信息'" :visible.sync="dialogForm
vue中新增和编辑两个功能共用一个弹窗和弹窗确定按钮，调用接口的处理方式（二）---父子vue页面
weixin_43312391的博客
02-23 5054
目标：点击增加按钮出现弹窗，弹窗中多选框的名称是通过其他接口获取的；点击编辑按钮出现弹窗，且该行的数据已被传递到该弹窗中，增加和编辑接口均是点击弹窗中的确定按钮进行调用的。 1.api的js接口文件中： // 编辑 export function rulesUpdate(param) { return request({ url: "/xxx/xxxx/update", method: "post", headers: {
VUE项目的新增和编辑使用同一个弹窗，出现关闭编辑弹窗然后打开新增弹会有验证提示问题
lichunjiang_的博客
01-27 2350
VUE项目的新增和编辑使用同一个弹窗，出现关闭编辑弹窗然后打开新增弹会有验证提示问题 解决方法 定义一个使用 this.$nextTickH函数的方法，大致它会在dom形成之后更新数据。 clearValidate() { const form: any = this.$refs['refName']; if (form) { this.$nextTick(() => { form.clearValidate(); }) } .
vue实现新增编辑共用一个弹窗
m0_56272227的博客
11-10 3945
vue实现新增编辑共用一个弹窗
vue项目子组件每次打开显示的都是上一次的内容怎么办
肖肖肖丽珠的博客
08-15 6881
打开一个子组件的弹窗编辑完成弹窗关闭但是当第二次打开还是上次编辑完的那个状态。发现并没有清空里面的数据。而且没有重新走created。 这个时候的解决办法是你把弹窗写个v-if和visible.sync写一样的变量。这样就可以啦。 <!--添加新的资源的弹窗--> <el-dialog :visible.sync="uploadDialogVisible" v-if="uploadDialogVisible" width="50%" ...
Vue-element 编辑与新增共用一个弹框
FFFAN_KIKI的博客
03-31 2795
一、HTML部分代码 <!-- 新增编辑弹框 --> <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" :append-to-body="showFlag" width="350px" height="400px" @close="addDialogClosed" > &.
vue中新增和编辑两个功能共用一个弹窗和弹窗确定按钮，调用接口的处理方式（一）--- 同一个vue页面
weixin_43312391的博客
04-20 9195
实现目标：点击新增和编辑按钮时出现同一个弹窗，但展示信息不同，分别对接新增和编辑接口。 直观效果： 前端页面中的新增和编辑按钮 点击新增按钮出现的弹框： 点击编辑出现的弹框： 新增和编辑均是通过确定按钮来对接接口。 后端swagger： api下的js文件： // 新增 export function insertMaterial(param) { return request({ url: '/xxxx/xxxxx/insert', .
vue项目中编辑和新增用的是同一个弹窗，如何判断用户点击是编辑还是新增？
铁锤妹妹的博客
03-25 8934
1. 前言 最近在做后台管理，一个页面中会用到多个弹窗，所以整合成一个弹窗就好，另外需要判断用户点击是编辑还是新增，相应的进行一些操作，这个问题也挺常见的，记录一下吧~ 新增弹窗 编辑弹窗 2. 问题 首先，这里有两个问题 1. 编辑所在的这个组件和新增所在的这个组件这是两个子组件，怎么让编辑和新增同时使用一个弹窗 2. 点击弹窗的确定按钮的时候怎么判断是新增的还是编辑的 3. 解决问题 针对问题一： 绑定title，在data里面定义dialogTitle为空，然后点击新增或者编辑弹窗之前给他赋值
新增/修改共用一个模态框的方法
慧小慧博客
07-07 1660
新增/修改共用一个模态框的方法 开发工具与关键技术：MVC、JavaScript 作者：邱慧敏 撰写时间：2019/07/07 当你不想打那么多代码的时候，你可以在新增和修改的方面稍微偷一下懒，也就是说把新增和修改的模态框共用起来，当然前提是新增和修改的模态框的内容是一模一样的，好了下面说说代码的事： 先给一个模态框的样式给你们看一下，左边的是代码 右边的是样式 因为我的新增和修改需要的都是（...
vue3 共用一个 el-dialog弹框组件 实现新增和编辑 怎么写代码
最新发布
05-26
可以使用 `props` 来控制弹框的内容和行为。具体实现方式如下： 1. 在父组件中，定义一个 `data` 对象，用于控制弹框的显示和隐藏状态，以及传递给子...这样，就可以通过一个共用的弹框组件来实现新增和编辑操作了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值