开发过程中遇到需要使用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时渲染出现问题