element 中使用多层嵌套el-dialog v-if v-show 渲染失败问题

开发过程中遇到需要使用el-dialog多层嵌套的问题，导致第一层dialog中用v-if v-show渲染的元素无法正常显示，先说解决方法

<div v-if="giftboxlist">
  <el-dialog title="选择产品" width="40%"  :show-close="false" :append-to-body="true":visible.sync="giftboxlist">
    <div class="groupbox">
      <div class="searchbox">
        <el-form ref="form" :model="result" label-width="auto">
          <el-row>
            <el-col :span="8">
              <el-form-item label="产品编码">
                <el-input v-model="result.code" class="width100" type="text" clearable />
              </el-form-item>
              ...
      </div>
    </div>
  </el-dialog>
</div>

在多层嵌套的dialog中包裹一层div
问题的原因是因为在dialog关闭时实际的DOM树是没有删除对应的DOM的，这样就可能会导致第一层的元素在使用v-if或v-show时渲染出现问题