el-dialog 里面的組件不刷新問題

• 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>

打開時 渲染的內容如下：

關閉時 渲染的內容如下：

什么鬼，怎么只是加了個屬性 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>

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