element?Drawer?抽屜無(wú)法渲染問(wèn)題及解決
element Drawer 抽屜無(wú)法渲染
出現(xiàn)的問(wèn)題
不使用腳手架和node.js時(shí)drawer不渲染
原因
沒有引入最新的樣式
解決方案
cdn引入
<!-- 引入樣式 --> <link rel="stylesheet" rel="external nofollow" > <!-- 引入組件庫(kù) --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
element drawer使用中遇到的坑點(diǎn)
業(yè)務(wù)需求是新增編輯時(shí)清空點(diǎn)擊編輯按鈕時(shí)的回顯數(shù)據(jù)
需要清空 el-drawer 里面的數(shù)據(jù)，有表單，也有不是表單的數(shù)據(jù),表單可以使用表單的一次性清空，但是非表單數(shù)據(jù)該不是要一個(gè)個(gè)去置空吧，那我要它何用？？？
遇到問(wèn)題，我的原則是干掉問(wèn)題，不是護(hù)士問(wèn)題，你不干掉它，它就會(huì)干掉你！~~~~
測(cè)試了好久，后才發(fā)現(xiàn)原來(lái)有個(gè)效果就是觸發(fā)drawer的關(guān)閉事件是可以清空回顯數(shù)據(jù)的，一般的this.drawer = false，是無(wú)法達(dá)到期望效果的
父組件
<el-drawer
ref="drawer"
:title="title"
size="100%"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose"
close-on-press-escape
:destroy-on-close="true"
>
<add-question ref="addQuestion" :show-more="showMore"></add-question>
</el-drawer>add組件里面有子組件
<div v-if="showQType === 1" ref="formContent" class="c-content">
<question-single :question-types="questionTypes"></question-single>
</div>question-single組件里button
cancelAdd() {
bus.$emit('closeDrawer')
// this.plat.drawer = false 直接設(shè)置無(wú)法清空數(shù)據(jù),殘留點(diǎn)擊編輯按鈕是的回顯數(shù)據(jù)
}浪費(fèi)了大半天時(shí)間百度，找不到解決方法，但直覺告訴我，餓了么的人肯定會(huì)有解決方法，于是開始啃文檔，果不其然，不負(fù)所望
經(jīng)過(guò)反復(fù)測(cè)試，只需要觸發(fā)這個(gè)方法，就可以在點(diǎn)擊新增按鈕時(shí)清空之前編輯后遺留的數(shù)據(jù)
我自己的方法，由于組件嵌套多，于是用了事件總線bus,直接在mounted里面監(jiān)聽
最后效果，還是很滿意的
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue定義模態(tài)框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了解決vue3打包過(guò)后空白頁(yè)面的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
?面試問(wèn)題Vue雙向數(shù)據(jù)綁定原理
這篇文章主要介紹了?面試問(wèn)題Vue雙向數(shù)據(jù)綁定原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
詳解Vue2.x-directive的學(xué)習(xí)筆記
這篇文章主要介紹了詳解Vue2.x-directive的學(xué)習(xí)筆記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
關(guān)于VanCascader默認(rèn)值(地址code轉(zhuǎn)換)
這篇文章主要介紹了關(guān)于VanCascader默認(rèn)值(地址code轉(zhuǎn)換),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue組件通信傳遞數(shù)據(jù)的三種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了VSCode使用之Vue工程配置eslint，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
vue之帶參數(shù)跳轉(zhuǎn)打開新頁(yè)面、新窗口
這篇文章主要介紹了vue之帶參數(shù)跳轉(zhuǎn)打開新頁(yè)面、新窗口方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue?檢測(cè)變化的注意事項(xiàng)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
vue watch偵聽器有無(wú)immediate的運(yùn)行順序問(wèn)題
這篇文章主要介紹了vue watch偵聽器有無(wú)immediate的運(yùn)行順序問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08