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è)務需求是新增編輯時清空點擊編輯按鈕時的回顯數(shù)據(jù)

需要清空 el-drawer 里面的數(shù)據(jù)，有表單，也有不是表單的數(shù)據(jù),表單可以使用表單的一次性清空，但是非表單數(shù)據(jù)該不是要一個個去置空吧，那我要它何用？？？

遇到問題，我的原則是干掉問題，不是護士問題，你不干掉它，它就會干掉你！~~~~

測試了好久，后才發(fā)現(xiàn)原來有個效果就是觸發(fā)drawer的關閉事件是可以清空回顯數(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ù)據(jù),殘留點擊編輯按鈕是的回顯數(shù)據(jù)
    }

浪費了大半天時間百度，找不到解決方法，但直覺告訴我，餓了么的人肯定會有解決方法，于是開始啃文檔，果不其然，不負所望

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

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

最后效果，還是很滿意的

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue定義模態(tài)框的方法
這篇文章主要為大家詳細介紹了vue定義模態(tài)框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
解決vue3打包過后空白頁面的情況
這篇文章主要介紹了解決vue3打包過后空白頁面的情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
?面試問題Vue雙向數(shù)據(jù)綁定原理
這篇文章主要介紹了?面試問題Vue雙向數(shù)據(jù)綁定原理，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-09-09
詳解Vue2.x-directive的學習筆記
這篇文章主要介紹了詳解Vue2.x-directive的學習筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
關于VanCascader默認值(地址code轉換)
這篇文章主要介紹了關于VanCascader默認值(地址code轉換),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue組件通信傳遞數(shù)據(jù)的三種方式
這篇文章主要介紹了Vue組件通信傳遞數(shù)據(jù)的三種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2023-04-04
VSCode使用之Vue工程配置eslint
這篇文章主要介紹了VSCode使用之Vue工程配置eslint，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
vue之帶參數(shù)跳轉打開新頁面、新窗口
這篇文章主要介紹了vue之帶參數(shù)跳轉打開新頁面、新窗口方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue?檢測變化的注意事項
這篇文章主要介紹了Vue?檢測變化的注意事項，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-08-08
vue watch偵聽器有無immediate的運行順序問題
這篇文章主要介紹了vue watch偵聽器有無immediate的運行順序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08