vue antDesign form表单问题总结_warning.js:6 warning: [ant-design-vue: form.item]

最近新项目使用antd1.6版本进行的开发，相比之前项目1.5的版本，很多组件都进行了调整。项目开发中form表单用的频率比较高，今天做一下总结！

首先说下1.5的版本吧，1.5版本的时候表单组件一直用的form，当时感觉还行，相比elementUI差异还是比较大，尤其对值的操作和表单的校验，简单上一下代码说明一下

<!-- 模板 -->
<a-form :form='form'>
	<a-form-item label='用户名'>
		<a-input v-decorator="['username',
		{rules:[{required: true, validator: checkName, message: '请输入用户名'}]}]" />
	</a-form-item>
</a-form>
1
2
3
4
5
6
7

// 初始化表单
beforeCreate () {
	this.form = this.$form.createForm(this)
},
methods: {
	// 获取通过校验后的表单值
	getFormValue () {
		this.form.validateFields((err,values) => {
			if (!err) {
				console.log(values)
			}
		})
	},
	// 为表单设置默认值，常用于编辑的时候回显数据
	setFormValue () {
		this.$nextTick(() => {
			this.form.setFieldsValue({
				username: '用户'
			})
		})
	},
	// 重置表单一般在第一次访问表单时进行重置
	resetFormValue () {
		this.$nextTick(() => {
			this.form.resetFields()
		})
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

此时一个最简单的表单就完成了，适用于新增和编辑通用。这是1.5版本的方式，值的绑定通过v-decorator来进行操作，校验也是直接在这里进行。

到了1.6版本我们直接选用formItem组件了，看了下官网，和elementUI已经炒鸡类似了，还是先上代码！

<!-- 模板 -->
<a-form-model :model="form" :rules="rules" ref="ruleForm">
	<a-form-model-item label="用户名" prop="username">
		<a-input v-model="form.username" placeholder="请输入用户名"/>
	</a-form-model-item>
	<a-form-model-item label="性别" prop="sex">
		<a-select v-model="form.sex" placeholder="请选择性别">
			<a-select-option value='male'>男</a-select-option>
			<a-select-option value='female'>女</a-select-option>
		</a-select>
	</a-form-model-item>
</a-form-model>
1
2
3
4
5
6
7
8
9
10
11
12

data () {
	return {
		form: { username: '', sex: undefined },
		rules: {
			username: [{ required: true, message: '请输入用户名', validate: checkName, trigger: 'change'}],
			sex: [{ required: true, message: '请选择性别', trigger:'blur'}]
		}
	}
},
methods: {
	getFormValue () {
		this.$refs.ruleForm.validate(valid => {
			if (valid) {
				console.log(this.form)
			}
		})
	},
	// 初始化表单
	resetForm () {
		this.$refs.ruleForm.resetFields()
	}
	// 初始化表单校验状态
	clearValidate () {
		this.$refs.ruleForm.clearValidate()
	}
	// 设置默认值
	setFormValue () {
		this.$nextTick(() => {
			this.clearValidate()
			this.form = {
				username: "用户名",
				sex: 'male'
			}
		})
	}
	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

以上就是1.6版本的formItem组件使用方法了，比较简单，各位同学可以根据自己的喜欢去选择！

说下遇到的问题吧，1.6版本的优势较于1.5的form组件不需要再进行初始化表单了，也就是this.form = this.$form.createForm(this)整体使用更类似于elementUI了，使用v-model的方式来进行双向绑定，通过ref属性来对表单进行初始化和其他的操作，我觉得比form组件其实要好用一些吧，纯属个人观点哈！这里需要注意的就是在重置校验状态这个问题上，不光重置表单就行，还需要重置校验状态，否则会缓存校验状态的this.$refs.ruleForm.clearValidate()直接使用官方提供的clearValidate方法来解决就ok

还有就是组件默认值的类型问题，这也是为什么在formItem组件里我写了select选择框而且加了placeholder的原因，需要在data里定义form表单字段的默认类型时注意select需要设置为undefined，不能设置为空字符串，否则placeholder会失效，要明确组件的默认类型和默认值！

以上就是今天给大家分享的小知识，希望大家多多支持啊！有问题的话可以随时来找我交流哈！
VX: zuikanyusheng