vue antd Form表单的使用
1、安装
$ npm i --save ant-design-vue2、引入 在 main.js 文件中引入
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd);3、在组件库中找到form组件，将组件代码复制到自己的文件上
https://www.antdv.com/components/form-cn/ <-- 组件地址
4、使用form表单时 v-decorator 相当于 v-model,所以使用 v-decorator 时不能使用v-model
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
<a-form-item label="Note">
<a-input
v-decorator="['note', //value名字 例如:v-model="note"
{ rules: [
{ required: true,// 是否必填 true必填 false不必填
message: 'Please input your note!' //触发限制时的提示
}
]
}
]"
/>
</a-form-item>
</a-form>
<!-- ----------------------------------------- -->
<script>
export default {
data() {
return {
formLayout: 'horizontal',
form: this.$form.createForm(this, { name: 'coordinated' }),
};
},
methods: {
}
};
</script>5、获取表单的内容，并做限制
methods: {
handleSubmit(e) {
e.preventDefault(); //阻止默认操作
this.form.validateFields((err, values) => { //获取表单的值
if (!err) {
console.log(values) //values是表单里面所有值的集合，使用方法 例如 values.note
}
});
},
},6、获取表单内容，不做限制，单纯获取
methods: {
handleSubmit(e) {
e.preventDefault(); //阻止默认操作
const values=this.form.getFieldsValue() //values是表单里面所有值的集合，使用方法 例如 values.note
},
},7、清空表单
this.form.resetFields();//在点击 清空或重置按钮时调用的函数中使用8、修改表单内容
this.form.setFieldsValue({
note:"大可爱"
})9、默认内容 表单中默认的value值用 initialValue 设置
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
<a-form-item label="Note">
<a-input
v-decorator="['note', //value名字 例如:v-model="note"
{ rules: [
{ required: true,// 是否必填 true必填 false不必填
message: 'Please input your note!' //触发限制时的提示
}
] ，
initialValue:"3333" //默认value值
}
]"
/>
</a-form-item>
</a-form>antd vue表单使用注意点
1、表单基本元素及获取表单值
<a-form layout="inline" :form="form">
<a-form-item label="姓名" >
<a-input v-decorator="['name']" placeholder="请输入姓名"></a-input>
</a-form-item>
<a-button type="primary" html-type="submit" @click="submit">查询</a-button>
</a-form-item>
</a-form>
<script>
export default {
data() {
return {
form: this.$form.createForm(this, { name: 'form name' }),
},
methods:{
submit(){
console.log(this.form.getFieldsValue())
}
}
}
</script>
1、使用this.$form.createForm(this, options)包装组件，便于之后查找组件
2、通过v-decorator或者getFieldDecorator和表单进行双向绑定
3、使用 getFieldsValue
getFieldValue setFieldsValue 等获取或设置表单值
2、表单元素添加默认值
<a-input v-decorator="['name',{initialValue: info.name}]" ></a-input>
通过v-decorator中的initialValue进行设置
3、Select选择器
在使用Select, 选项比较多, 通过输入来筛选选项需要设置showSearch为true，Select组件默认是按照筛选项的value来筛选的.，如果需要按照筛选项的显示的内容来筛选, 应该把optionFilterProp的值修改为children
4、向表单中额外注册不显示的表单项
错误方式：
this.form.setFieldsValue({extF: 'test'})报错如下：
[Antd] Warning: You cannot set a form field before rendering a field associated with the value.
正确方式：
this.form.getFieldDecorator('extF', {initialValue: 'test', preserve: true})
5、穿梭框获取target对应的title
let targetList= []
this.targetKeys.forEach(item => {
let arr = this.list.filter(value => value.key == item)
targetList= [...targetList, ...arr]
})
let titles = []
newArr.forEach(item => {
titles.push(item.title)
})
6、Select选择器获取对应的label值
设置labelInValue值
这样的话，FormItem中设置initialValue时应如下设置：
initialValue:{key:formVals.itemId,label:formVals.itemName},如果要清掉这种情况下的value值，请设置为undefined
this.form.setFieldsValue({dep: undefined})7、Select选择器传递自定义参数
<a-select @change="value => handleChange(value, param)" >
</a-select>
handleChange的value参数即为默认参数，param为自定义参数
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
