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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue打包时去掉所有的console.log
Apr 10 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
基于文本的访客签到簿
2006/10/09 PHP
PHP中动态显示签名和ip原理
2007/03/28 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Python中的pprint折腾记
2015/01/21 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
基于python检查矩阵计算结果
2020/05/21 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
餐厅采购员岗位职责
2014/03/06 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
导游词开场白
2015/01/31 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
八月迷情观后感
2015/06/11 职场文书
小学庆六一主持词
2015/06/30 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis