element?Drawer抽屜無(wú)法渲染如何解決

本篇內(nèi)容介紹了“element Drawer抽屜無(wú)法渲染如何解決”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

element Drawer 抽屜無(wú)法渲染

出現(xiàn)的問(wèn)題

不使用腳手架和node.js時(shí)drawer不渲染

原因

沒(méi)有引入最新的樣式

解決方案

cdn引入

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" 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ì)有解決方法，于是開始啃文檔，果不其然，不負(fù)所望

經(jīng)過(guò)反復(fù)測(cè)試，只需要觸發(fā)這個(gè)方法，就可以在點(diǎn)擊新增按鈕時(shí)清空之前編輯后遺留的數(shù)據(jù)

我自己的方法，由于組件嵌套多，于是用了事件總線bus,直接在mounted里面監(jiān)聽(tīng)

最后效果，還是很滿意的

“element Drawer抽屜無(wú)法渲染如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！