element-ui的tags导致页面卡死

一、问题描述

    <el-dialog
      :visible.sync="showPltData"
      width="70%"
      top="5vh"
      :destroy-on-close="true"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="resetForm"
    >
      <el-row>
        <el-col :span="24">
          <el-tabs v-model="tabActive" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
          </el-tabs>
       </el-col>
     </el-row>
  </el-dialog>

然后点击弹出层右上角的关闭卡死，刷新都没用，只能把页面关了

二、解决办法

1、修改Dialog的属性

//element-ui官网上Dialog的某个属性
destroy-on-close	关闭时销毁 Dialog 中的元素	boolean	—	false

改成false，就不会卡死了，相当于关闭时不销毁Dialog中的元素

2、仿写一个tags

有了1方法，为啥还要2方法？因为业务需求，需要在Dialog中绘制图形，destroy-on-close=false虽然解决了tags的卡死问题，但是带来了另一个问题，页面绘制的图形因为每次关闭没有销毁，导致图形重复绘制

<div>
  <span class="plt_tabs"
        :class="{ tab_active: tabActive == item.id }"
        @click="tabClick(item.id)"
        v-for="(item, index) in tabTitle"
        :key="item.id">
              {{ item.name }}
          </span>
  <hr/>
  <div v-show="tabActive == 1" style="height: 550px;"></div>
  <div v-show="tabActive == 2" style="height: 550px;"></div>
  <div v-show="tabActive == 3" style="height: 550px;"></div>
  <div v-show="tabActive == 4" style="height: 550px;"></div>
  <div v-show="tabActive == 5" style="border:1px solid #ccc;height: 500px;width: 500px;padding: 0px" id="Qs"></div>
  <div v-show="tabActive == 6" style="border:1px solid #ccc;height: 500px;width: 500px;padding: 0px" id="SlgQ"></div>
  <div v-show="tabActive == 7" style="border:1px solid #ccc;height: 500px;width: 500px;padding: 0px" id="Slgt"></div>
</div>

//tags文本内容
tabTitle: [
    {id: 1, name: '原始表'},
    {id: 2, name: '汇总表'},
    {id: 3, name: '加载表'},
    {id: 4, name: '卸载表'},
    {id: 5, name: 'Q-s曲线'},
    {id: 6, name: 'S-lgQ曲线'},
    {id: 7, name: 'S-lgt曲线'}
],

	//tags点击事件方法
    tabClick(id) {
      if(this.tabActive != id) {
        this.tabActive = id
      }
      this.$nextTick(() => {
        switch(id)
        {
          case 5:
            if (this.canvas.qs == false) {
              draw_qs('Qs', this.collectData,0 , 'KN')
              this.canvas.qs = true
            }
            break
          case 6:
            if (this.canvas.slgq == false){
              draw_lgq('SlgQ', this.collectData, 0, 'KN')
              this.canvas.slgq = true
            }
            break
          case 7:
            if (this.canvas.slgt == false){
              draw_lgt('Slgt', this.lgtData,0, 'KN')
              this.canvas.slgt = true
            }
            break
          default:
            break
        }
      })
    }

   //tags样式
  .plt_tabs {
    margin-right: 30px;
    cursor:pointer;
    font-weight: bold;
  }

  .tab_active {
    color: #409EFF;
  }

三、效果展示