vue antd Form表单的使用及说明
作者:什么小蛋挞**
vue antd Form表单的使用
1、安装
$ npm i --save ant-design-vue
2、引入 在 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为自定义参数
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。