[Bug Report] el-tabs in el-dialog with destroy-on-close=‘true’ ,dialog can't be closed

[nanachiOwQ]

Element UI version

2.13.2

OS/Browsers version

windows chrome89

Vue version

2.6.12

Reproduction Link

https://codepen.io/dracarys26/pen/qBRJaXr

Steps to reproduce

click the button to open dialog ，then click x to close the dialog

What is Expected?

dialog can be closed

What is actually happening?

page crash

[enguerrand-dilitrust]

Seems to be fixed by pending PR #17380

[nanachiOwQ]

Seems to be fixed by pending PR #17380

I tested with the latest version and the problem still exists

[wind-liang]

For solutions Vue 2.6+, wrap a layer of template in el-tab-pane to specify slot as default .

<el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            destroy-on-close
        >
    <el-tabs type="border-card">
        <template>
            <el-tab-pane label="用户管理"><template #default>用户管理</template></el-tab-pane>
            <el-tab-pane label="配置管理"><template #default>配置管理</template></el-tab-pane>
            <el-tab-pane label="角色管理"><template #default>角色管理</template></el-tab-pane>
            <el-tab-pane label="定时任务补偿"><template #default>定时任务补偿</template></el-tab-pane>
        </template>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
        >
    </span>
</el-dialog>

Below Vue 2.6, v-if is added to el-tabs, which is destroyed when the dialog is closed

 <div id="app">
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            destroy-on-close
        >
      <el-tabs type="border-card" v-if="dialogVisible">
          <el-tab-pane label="用户管理">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
          >
      </span>
  </el-dialog>

An analysis of the issue in a Chinese blog