vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue antd Form表单的使用

vue antd Form表单的使用及说明

作者:什么小蛋挞**

这篇文章主要介绍了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为自定义参数

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文