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 $router和$route的区别详解
Dec 02 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python脚本实现集群检测和管理功能
2015/03/06 Python
python下MySQLdb用法实例分析
2015/06/08 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
在Python中使用Neo4j的方法
2019/03/14 Python
python设置环境变量的作用和实例
2019/07/09 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
详解Django配置JWT认证方式
2020/05/09 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
MySQL面试题目集锦
2016/04/14 面试题
护理专业本科生自荐信
2013/10/01 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2014年应急工作总结
2014/12/11 职场文书
论文答谢词
2015/01/20 职场文书
白银帝国观后感
2015/06/17 职场文书