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