嵌套el-dialog时子级无法正常显示

3层嵌套时出现了最终一级的弹框无法正常显示,遮罩层显示了
解决办法:添加属性append-to-body

<el-dialog title="新增" :visible.sync="addOpen" width="600px" v-dialogDrag append-to-body
               :close-on-press-escape="false"
               :close-on-click-modal="false"
               center
               :fullscreen="false"
               @close='closeAddDialog'
    >
      <BankAccountDialog ref="addBankAccount" tabName="addBankAccount" @closeDialog="closeAddDialog"/>
    </el-dialog>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-form可以嵌套el-dialog中使用。通过在el-dialog内部放置el-form组件,可以方便地实现在对话框内进行表单输入和提交的功能。具体实现方法如下: 1. 首先,需要在el-dialog的内容区域内放置el-form组件。可以参考以下代码示例: ``` <el-dialog title="编辑信息" :visible.sync="dialogVisible"> <el-form :model="formData" label-width="80px"> <!-- 表单项 --> <el-form-item label="姓名"> <el-input v-model="formData.name"></el-input> </el-form-item> <!-- 其他表单项 --> ... </el-form> </el-dialog> ``` 2. 在el-form组件中定义表单项以及其对应的数据绑定。可以使用v-model指令将表单项的值与data中的数据进行双向绑定,方便后续处理表单数据。 3. 在el-dialog的底部可以添加确定和取消按钮,用来提交或取消对话框中的表单数据。可以参考以下代码示例: ``` <el-dialog title="编辑信息" :visible.sync="dialogVisible"> <el-form :model="formData" label-width="80px"> <!-- 表单项 --> ... </el-form> <div slot="footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleSubmit">确定</el-button> </div> </el-dialog> ``` 4. 在methods中定义表单提交的方法handleSubmit,并在该方法中处理表单数据的提交逻辑。 通过以上步骤,就可以在el-dialog嵌套el-form,并实现对话框内的表单输入和提交功能。请根据具体需求对el-form和el-dialog的配置进行调整。引用<span class="em">1</span><span class="em">2</span><span class="em">3</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值