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