vue如何實(shí)現(xiàn)關(guān)閉對(duì)話框后刷新列表

更新時(shí)間：2022年04月08日 09:58:52 作者：℡往事隨風(fēng)煙消云散.

這篇文章主要介紹了vue如何實(shí)現(xiàn)關(guān)閉對(duì)話框后刷新列表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

關(guān)閉對(duì)話框后刷新列表

有些場(chǎng)景需要實(shí)現(xiàn)用戶彈窗確定后自動(dòng)刷新列表，父窗口綁定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)列表自動(dòng)刷新

關(guān)閉打開的窗口后刷新父頁(yè)面

背景：在做頁(yè)面的過程中需要在頁(yè)面列表里面添加數(shù)據(jù)，但是添加之后需要手動(dòng)刷新頁(yè)面才會(huì)出現(xiàn)添加的數(shù)據(jù)。

解決辦法

可在添加成功之后添加代碼

parent.location.reload();

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能詳解
這篇文章主要給大家介紹了關(guān)于VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能的相關(guān)資料,文中還給大家介紹了vue-print-nb使用中的常見問題，如空白頁(yè),需要的朋友可以參考下
2022-04-04
富文本編輯器quill.js?開發(fā)之自定義插件示例詳解
這篇文章主要為大家介紹了富文本編輯器quill.js?開發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
淺析Vue2/Vue3中響應(yīng)式的原理
這篇文章主要是來和大家一起討論一下Vue2與Vue3中響應(yīng)式的原理，文中的相關(guān)示例代碼簡(jiǎn)潔易懂，對(duì)我們深入了解Vue有一定的幫助，需要的可以參考下
2023-07-07
vue3中使用jsx的實(shí)現(xiàn)步驟
本文主要介紹了vue3中使用jsx的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
解決vue初始化項(xiàng)目時(shí),一直卡在Project description上的問題
今天小編就為大家分享一篇解決vue初始化項(xiàng)目時(shí),一直卡在Project description上的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解
defineModel?是一個(gè)新的?<script?setup>?宏,旨在簡(jiǎn)化支持?v-model?的組件的實(shí)現(xiàn),?這個(gè)宏用來聲明一個(gè)雙向綁定?prop,下面我們就來看看他的具體使用吧
2024-03-03
Vue彈窗Dialog最佳使用方案實(shí)戰(zhàn)
這篇文章主要為大家介紹了極度舒適的Vue彈窗Dialog最佳使用方案實(shí)戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
解決vue點(diǎn)擊控制單個(gè)樣式的問題
今天小編就為大家分享一篇解決vue點(diǎn)擊控制單個(gè)樣式的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue仿ios列表左劃刪除
這篇文章主要為大家詳細(xì)介紹了vue仿ios列表左劃刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
Vue超詳細(xì)講解重試機(jī)制示例
這篇文章主要介紹了Vue重試機(jī)制示例，重試指的是當(dāng)加載出錯(cuò)時(shí)，有能力重新發(fā)起加載組件的請(qǐng)求。異步組件加載失敗后的重試機(jī)制，與請(qǐng)求服務(wù)端接口失敗后的重試機(jī)制一樣
2023-01-01