Translation of this issue:

Element UI version

2.15.3

OS/Browsers version

chorm

Vue version

2.6.14

Reproduction Link

https://elementui.github.io/issue-generator/#/zh -CN

Steps to reproduce

<el-dialog

:visible.sync="fieldOptionModelVisible"
Title = "field permission editor"

custom-class="fieldOptionModel"
width="600px"

append-to-body destroy-on-close>

<el-tab-pane
v-for="tab in tabsData"

:key="tab.tableId"
:label="tab.tableName"

:name="tab.tableId">

< El form item label = "activity name" >

< El form item label = "activity nature" >

< El checkbox button label = "push activity" name = "type" > < / El checkbox button >
< El checkbox button label = "offline theme activity" name = "type" > < / El checkbox button >

< El button size = "mini" plain type = "primary" @ Click = "fieldoptionmodel visible = false" > cancel < / El button >
< El button size = "mini" type = "primary" @ Click = "fieldoptionmodelvisable = false" > confirm < / El button >

What is Expected?

It can operate normally

What is actually happening?

When closed, the page crashes

遇到同样的问题了

Element UI version
2.13.2

OS/Browsers version
edge

Vue version
2.6.11

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