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
在这里插入图片描述
参考:https://www.jianshu.com/p/f0998d59e0cc
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})

https://blog.csdn.net/tony121lee/article/details/89704011

7、Select选择器传递自定义参数

<a-select @change="value => handleChange(value, param)" >
 </a-select>

handleChange的value参数即为默认参数,param为自定义参数

Logo

前往低代码交流专区

更多推荐