技術標籤：webvue

el-dialog裡面的內容是帶快取的，也就是說除了第一次開啟會初始化，其他次開啟都是直接載入快取的。

我們想每次開啟el-dialog都要初始化，比如使用者的許可權彈框，每次開啟我們都要把使用者擁有的許可權選中，類似的操作，如果載入了快取，這就會導致每個使用者回填的許可權都一樣了。

如果我們在每次關閉彈框時把彈框裡面的內容刪掉，這樣開啟時就會初始化了。

查閱了 Dialog 對話方塊 相關文件：

文件中有，我們可以設定為 :destroy-on-close=“true” 試一試。

<el-dialog
     title="日誌檢視"
     :visible.sync="dialogLogsVisible"
     fullscreen
     center
     **:destroy-on-close="true"**
 >
    <sys-business-log-list :record-name="recordName" :record-id="recordId" />
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLogsVisible=false">{{ $t('cancel') }}</el-button>
    </div>
</el-dialog>
 

開啟時 渲染的內容如下：

image-20200926202453369

關閉時 渲染的內容如下：

image-20200926202313957

什麼鬼，怎麼只是加了個屬性 display: none; ，說好的關閉銷燬元素呢。

沒辦法了，不能自動銷燬裡面的內容，那我們手動銷燬吧，

直接在內容上加上屬性 v-if="dialogLogsVisible"

<el-dialog
  title="日誌檢視"
  :visible.sync="dialogLogsVisible"
  fullscreen
  center
  :destroy-on-close="true"
 >
    <sys-business-log-list 
       v-if="dialogLogsVisible" 
       :record-name="recordName" 
       :record-id="recordId" 
    />
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLogsVisible=false">{{ $t('cancel') }}</el-button>
    </div>
</el-dialog>
 

這樣每次關閉彈框都會把內容直接移除了，現在終於不會快取了