elementui 再次打开dialog,绑定的数据不更新问题

1 因为dialog再次打开时不会重新渲染dom,只是简单的显示隐藏,所以第一次打开绑定值后,关闭再打开则不会走created和mounted生命周期,解决办法是在外层套一层div,用v-if控制

      <div v-if="editDialog_visual" >
        <el-dialog
          :area="[700,600]"
          top="middle"
          no-scrollbar
          title="人员编辑"
          :visible.sync="editDialog_visual"
          class="editDialog"
        >
          <!-- 编辑表单 -->
          <editForm :emitData="currentEditRow"></editForm>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="editDialog_visual = false">确 定</el-button>
            <el-button @click="editDialog_visual = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>

在实际应用种,加上外层div后,dialog内部元素会不显示,设置高度即可解决

这样也算是解决了dialog绑定值的问题。

ElementUIdialog 中,可以通过绑定表单验证规则(rules)来实现表单的验证。具体步骤如下: 1. 在 dialog 中添加一个表单,表单中包含需要验证的输入框等表单元素。 2. 在表单元素中添加 `v-model` 属性,用于绑定输入框的值。 3. 在表单元素中添加 `:rules` 属性,用于绑定验证规则。 例如,验证一个输入框必填且长度在 6-20 个字符之间,可以在模板中添加如下代码: ```html <el-dialog> <el-form> <el-form-item label="用户名" prop="username"> <el-input v-model="username" :rules="[ {required: true, message: '请输入用户名', trigger: 'blur'}, {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'} ]"></el-input> </el-form-item> </el-form> </el-dialog> ``` 4. 在 dialog 的确认按钮(或提交按钮)的点击事件中,调用表单的验证方法 `validate`,判断表单是否通过验证。如果表单验证通过,则执行后续操作;否则,提示用户错误信息。 例如,在确认按钮的点击事件中,可以添加如下代码: ```javascript this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过,执行后续操作 } else { // 表单验证失败,提示用户错误信息 this.$message.error('表单验证失败,请检查输入是否正确!'); } }); ``` 注意,这里的 `this.$refs.form` 是 dialog 中的表单组件的引用,需要在组件中添加 `ref` 属性来获取该引用: ```html <el-dialog> <el-form ref="form"> ... </el-form> </el-dialog> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨大大28

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值