快捷導(dǎo)航

關(guān)于Vue3中element-plus的el-dialog對(duì)話框無法顯示的問題及解決方法

更新時(shí)間：2023年10月24日 17:00:05 作者：怠惰の于

最近今天在寫一個(gè)停車場(chǎng)管理系統(tǒng)的項(xiàng)目時(shí),在用vue3寫前端時(shí),在前端模板選擇上,我一時(shí)腦抽,突然決定放棄SpringBoot,選擇了以前幾乎很少用的element-plus,然后果不其然,錯(cuò)誤連連,下面給大家分享dialog對(duì)話框無法顯示的原因,感興趣的朋友一起看看吧

最近今天在寫一個(gè)停車場(chǎng)管理系統(tǒng)的項(xiàng)目時(shí)，在用vue3寫前端時(shí)，在前端模板選擇上，我一時(shí)腦抽，突然決定放棄SpringBoot，選擇了以前幾乎很少用的element-plus，然后果不其然，錯(cuò)誤連連。最讓我頭疼的，就是dialog對(duì)話框無法顯示的原因。

第一個(gè)原因：忘記將默認(rèn)值修改為true。
簡(jiǎn)單說下邏輯，在element-plus中，你需要在data()方法中定義一個(gè)‘dialogVisible’值，不是dialogVisible也行，官網(wǎng)是這么定義的，其實(shí)就算你定義成‘wdnmd’也沒有任何問題，如如：

data() {
 return {
   form: {},
   wdnmd: false
 }
},

這個(gè)'wdnmd'就相當(dāng)于是否顯示對(duì)話框的鑰匙，默認(rèn)定義為 false，就是不顯示，一般dialog對(duì)話框不顯示的原因，大概率就是你忘記在按鈕的方法中wdnmd修改為true.例如：

methods: {
 editUser() {
   wdnmd = true
 },

第二個(gè)原因：將 :visible.sync="wdnmd"修改為v-model="wdnmd"(也是最蛋疼的一個(gè)原因)
例如：

將

<el-dialog  title="編輯"  :visible.sync="wdnmd" width="30%">
   <el-button @click="wdnmd = false">取消</el-button>
     <el-button type="primary" @click="save">修改</el-button>
     </span>
 </template>
</el-dialog>

修改為：

<el-dialog  title="編輯" v-model="wdnmd" width="30%">
   <el-button @click="wdnmd = false">取消</el-button>
     <el-button type="primary" @click="save">修改</el-button>
     </span>
 </template>
</el-dialog>

這是element-plus最新修改的用法，如果你是從網(wǎng)上或者ai那里弄來的代碼，大概率是一臉懵逼（沒錯(cuò)，我就是這樣），這是最近半年左右element-plus更新的用法，智障ai和網(wǎng)上的大部分源碼都遠(yuǎn)離這個(gè)時(shí)間段，甚至是用vue2。

總結(jié)

如果以后在遇到這樣搞不清楚的問題，記得先從基礎(chǔ)開始，也就是從官網(wǎng)開始。

我簡(jiǎn)單說下我解決這個(gè)問題的過程，先是debug，在控制臺(tái)確認(rèn)wdnmd的值確實(shí)被修改為true，我便開始懷疑不是我個(gè)人的問題，于是我開始上網(wǎng)搜索，網(wǎng)上的答案都試過，沒有用后，進(jìn)入element-plus官網(wǎng)，找到對(duì)應(yīng)的el-dialog用法，將官方的模板在自己的電腦上跑一下，然后依次對(duì)比錯(cuò)誤的代碼，就是改一段測(cè)一段，最后找到了這個(gè)問題。

到此這篇關(guān)于關(guān)于Vue3中element-plus的el-dialog對(duì)話框無法顯示的可能原因。的文章就介紹到這了,更多相關(guān)vue3 el-dialog對(duì)話框無法顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: