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+iview实现分页及查询功能
Nov 17 Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 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开启opcache提升代码性能
2015/04/26 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
js变量提升深入理解
2016/09/16 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python中文件操作简明介绍
2015/04/13 Python
详解Python中break语句的用法
2015/05/14 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
详解Python中的分支和循环结构
2020/02/11 Python
python中rb含义理解
2020/06/18 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
动态密码技术
2012/10/18 面试题
班级安全教育实施方案
2014/02/23 职场文书
医院合作协议书
2014/08/19 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android