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 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php全排列递归算法代码
2012/10/09 PHP
php异常处理使用示例
2014/02/25 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
深入浅析Python字符编码
2015/11/12 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
由面试题加深对Django的认识理解
2019/07/19 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
Pycharm安装python库的方法
2020/11/24 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
人力资源行政经理自我评价
2013/10/23 职场文书
18岁生日感言
2014/01/12 职场文书
村创先争优活动总结
2014/08/28 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
高中家长意见怎么写
2015/06/03 职场文书
python实现简单的三子棋游戏
2022/04/28 Python