V
2
R
A
 
F
R
E
E

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

首页 / 新闻资讯 / 正文

关闭对话框后刷新列表

有些场景需要实现用户弹窗确定后自动刷新列表,父窗口绑定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();