vue如何实现关闭对话框后刷新列表


Posted in Vue.js onApril 08, 2022

关闭对话框后刷新列表

有些场景需要实现用户弹窗确定后自动刷新列表,父窗口绑定fevent即可

父窗口代码

<template>
     <div>
 <el-button @click="$refs.editform.dialogFormVisible = true" >编辑用户</el-button>
 <editform  @fevent="update_table" ref="editform">
 </editform>
     </div>
 </template>
<script>
import editform from './editform.vue'
export default {
  components: {
    editform
  },
  methods: {
    update_table () {
      console.log('列表框被刷新了')
    }
  }
}
</script>

子窗口代码

<template>
       <el-dialog title="编辑用户"  :visible.sync="dialogFormVisible">
           <el-button @click="delete_user">删除用户</el-button>
    </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      dialogFormVisible: false
    }
  },
  methods: {
    delete_user () {
         this.$emit('fevent')
         this.$message.success('删除成功')
         this.dialogFormVisible = false
    }
  }
}
</script>

附加上自己的业务代码,即可实现列表自动刷新

关闭打开的窗口后刷新父页面

背景:在做页面的过程中需要在页面列表里面添加数据,但是添加之后需要手动刷新页面才会出现添加的数据。

解决办法

可在添加成功之后添加代码 

parent.location.reload();

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
vue实现列表垂直无缝滚动
Apr 08 #Vue.js
vue3引入highlight.js进行代码高亮的方法实例
vue中的可拖拽宽度div的实现示例
vue 实现弹窗关闭后刷新效果
Apr 08 #Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 #Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 #Vue.js
vue实现列表拖拽排序的示例代码
You might like
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
php经典趣味算法实例代码
2020/01/21 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
Bootstrap插件全集
2016/07/18 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
JavaScript 闭包的使用场景
2020/09/17 Javascript
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python中datetime模块参考手册
2017/01/13 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
python实现音乐下载器
2018/04/15 Python
python如何从键盘获取输入实例
2020/06/18 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
档案检查欢迎词
2014/01/13 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android