vue如何實(shí)現(xiàn)關(guān)閉對話框后刷新列表
關(guān)閉對話框后刷新列表
有些場景需要實(shí)現(xiàn)用戶彈窗確定后自動刷新列表,父窗口綁定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>附加上自己的業(yè)務(wù)代碼,即可實(shí)現(xiàn)列表自動刷新
關(guān)閉打開的窗口后刷新父頁面
背景:在做頁面的過程中需要在頁面列表里面添加數(shù)據(jù),但是添加之后需要手動刷新頁面才會出現(xiàn)添加的數(shù)據(jù)。
解決辦法
可在添加成功之后添加代碼
parent.location.reload();
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能詳解
這篇文章主要給大家介紹了關(guān)于VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能的相關(guān)資料,文中還給大家介紹了vue-print-nb使用中的常見問題,如空白頁,需要的朋友可以參考下2022-04-04
富文本編輯器quill.js?開發(fā)之自定義插件示例詳解
這篇文章主要為大家介紹了富文本編輯器quill.js?開發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
解決vue初始化項(xiàng)目時,一直卡在Project description上的問題
今天小編就為大家分享一篇解決vue初始化項(xiàng)目時,一直卡在Project description上的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解
defineModel?是一個新的?<script?setup>?宏,旨在簡化支持?v-model?的組件的實(shí)現(xiàn),?這個宏用來聲明一個雙向綁定?prop,下面我們就來看看他的具體使用吧2024-03-03
Vue彈窗Dialog最佳使用方案實(shí)戰(zhàn)
這篇文章主要為大家介紹了極度舒適的Vue彈窗Dialog最佳使用方案實(shí)戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11

