ant design form-model resetFields() 重置表单无效

特别注意一: 如果是下拉框需要重置重新显示placeholder,初始值需要设置undefined

data() {
    return {
        form: {
            deviceTypeId: undefined
        }
    }
}

特别注意二:使用resetFields时务必,加上prop和rules,即使需求不需要校验

validatorRules: {
        vendorId: [],
        deviceModelId: [],
        deviceTypeId: [],
        tempId: []
      },

此时方能生效

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果您使用的是ant-design-vue3的Modal组件,并尝试在关闭模态框时使用resetFields方法重置表单,但是发现该方法无效,可能是您的代码中存在一些问题。 首先,请确保您正确地引入了antd的Vue3组件库,并且使用了正确的版本。如果您不确定,请参考antd官方文档。 其次,请检查您的代码中是否正确使用了Form组件,并且已经将form对象绑定到了Modal组件中。例如,您的代码可能类似于以下代码片段: ```html <template> <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel"> <a-form :form="form"> <!-- 表单控件 --> </a-form> </a-modal> </template> <script> import { defineComponent, reactive } from 'vue'; import { Modal, Form } from 'ant-design-vue'; export default defineComponent({ components: { 'a-modal': Modal, 'a-form': Form, }, setup() { const form = reactive({}); const visible = reactive(false); const handleOk = () => { form.resetFields(); // 重置表单 visible.value = false; // 关闭模态框 }; const handleCancel = () => { form.resetFields(); // 重置表单 visible.value = false; // 关闭模态框 }; return { form, visible, handleOk, handleCancel, }; }, }); </script> ``` 在上面的代码中,我们将表单对象`form`绑定到了Modal组件中,并在`handleOk`和`handleCancel`方法中使用了`form.resetFields()`方法来重置表单。如果您的代码类似于此,但仍然无法解决问题,请尝试检查您的表单控件是否正确绑定了`v-model`,以及是否正确使用了`name`属性。 如果您仍然无法解决问题,请尝试提供更多的代码或其他信息,以便我们更好地帮助您解决问题
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值