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ù)該不是要一個個去置空吧，那我要它何用？？？
遇到問題，我的原則是干掉問題，不是護(hù)士問題，你不干掉它，它就會干掉你！~~~~
測試了好久，后才發(fā)現(xiàn)原來有個效果就是觸發(fā)drawer的關(guān)閉事件是可以清空回顯數(shù)據(jù)的，一般的this.drawer = false，是無法達(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è)置無法清空數(shù)據(jù),殘留點擊編輯按鈕是的回顯數(shù)據(jù)
}浪費了大半天時間百度，找不到解決方法，但直覺告訴我，餓了么的人肯定會有解決方法，于是開始啃文檔，果不其然，不負(fù)所望
經(jīng)過反復(fù)測試，只需要觸發(fā)這個方法，就可以在點擊新增按鈕時清空之前編輯后遺留的數(shù)據(jù)
我自己的方法，由于組件嵌套多，于是用了事件總線bus,直接在mounted里面監(jiān)聽
最后效果，還是很滿意的
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了element-ui select多選綁定回顯值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
過濾器是一個通過輸入數(shù)據(jù)，能夠及時對數(shù)據(jù)進(jìn)行處理并返回一個數(shù)據(jù)結(jié)果的簡單函數(shù)。下面這篇文章主要給大家介紹了關(guān)于vue.js中過濾器使用的相關(guān)資料，需要的朋友可以參考借鑒，下面來看看詳細(xì)的介紹。2017-06-06
本文詳細(xì)介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實現(xiàn)橫向滾動功能,感興趣的可以了解一下2024-09-09
elementui中el-input回車搜索實現(xiàn)示例
這篇文章主要介紹了elementui中el-input回車搜索實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了vue中的使用token的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要給大家分享的是Vue3的幾個優(yōu)勢，Vue3仍然在源碼、性能和語法 API 三個大的方面進(jìn)行了優(yōu)化，下面我們一起進(jìn)入文章看看具體詳情吧2021-10-10
下面小編就為大家?guī)硪黄獪\談vue-router2路由參數(shù)注意的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
眾所周知,當(dāng)容器高度固定而內(nèi)容部分高度超出容器高度時,瀏覽器會渲染出一個可以滾動并用于顯示剩余界面的條 -- 滾動條,它可以簡單的樣式修改,但是位置是固定的,無法移動,而我們需要改變位置的時候,它就不能滿足我們的需求了,這時我們可以自己手寫一個2023-10-10
Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作
這篇文章主要介紹了Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue3+vite項目中按需引入vant報錯:Failed?to?resolve?import的解決方案
最近在vue項目中引入vant的時候發(fā)現(xiàn)報錯了,經(jīng)過嘗試發(fā)現(xiàn)了問題,現(xiàn)將完整引入流程提供給大家參考,下面這篇文章主要給大家介紹了關(guān)于vue3+vite項目中按需引入vant報錯:Failed?to?resolve?import的解決方案,需要的朋友可以參考下2022-12-12