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組件，將組件代碼復(fù)制到自己的文件上
https://www.antdv.com/components/form-cn/ <-- 組件地址
4、使用form表單時(shí) v-decorator 相當(dāng)于 v-model,所以使用 v-decorator 時(shí)不能使用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!' //觸發(fā)限制時(shí)的提示
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ?]?
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ?]"
? ? ? />
? ? </a-form-item>
? </a-form>
?
<!-- ----------------------------------------- -->
<script>
export default {
? data() {
? ? return {
? ? ? formLayout: 'horizontal',
? ? ? form: this.$form.createForm(this, { name: 'coordinated' }),
? ? };
? },
? methods: {
? ?}
};
</script>5、獲取表單的內(nèi)容，并做限制
methods: {
? ? handleSubmit(e) {
? ? ? e.preventDefault(); //阻止默認(rèn)操作
? ? ? this.form.validateFields((err, values) => { //獲取表單的值
? ? ? ? if (!err) {
? ? ? ? ?console.log(values) //values是表單里面所有值的集合，使用方法 例如 values.note
? ? ? ? }
? ? ? });
? ? },
? },6、獲取表單內(nèi)容，不做限制，單純獲取
methods: {
? ? handleSubmit(e) {
? ? ? e.preventDefault(); //阻止默認(rèn)操作
? ? ? const values=this.form.getFieldsValue() //values是表單里面所有值的集合，使用方法 例如 values.note
? ? },
? },7、清空表單
this.form.resetFields();//在點(diǎn)擊 清空或重置按鈕時(shí)調(diào)用的函數(shù)中使用
8、修改表單內(nèi)容
this.form.setFieldsValue({
? ? note:"大可愛"
})9、默認(rèn)內(nèi)容 表單中默認(rèn)的value值用 initialValue 設(shè)置
<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!' //觸發(fā)限制時(shí)的提示
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ?] ，
? ? ? ? ? ? ? ? ? ? ? ? ? ?initialValue:"3333" //默認(rèn)value值
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ?]"
? ? ? />
? ? </a-form-item>
? </a-form>antd vue表單使用注意點(diǎn)
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和表單進(jìn)行雙向綁定
3、使用 getFieldsValue
getFieldValue setFieldsValue 等獲取或設(shè)置表單值
2、表單元素添加默認(rèn)值
<a-input v-decorator="['name',{initialValue: info.name}]" ></a-input>
通過v-decorator中的initialValue進(jìn)行設(shè)置
3、Select選擇器
在使用Select, 選項(xiàng)比較多, 通過輸入來篩選選項(xiàng)需要設(shè)置showSearch為true，Select組件默認(rèn)是按照篩選項(xiàng)的value來篩選的.，如果需要按照篩選項(xiàng)的顯示的內(nèi)容來篩選, 應(yīng)該把optionFilterProp的值修改為children
4、向表單中額外注冊不顯示的表單項(xiàng)
錯(cuò)誤方式：
this.form.setFieldsValue({extF: 'test'})報(bào)錯(cuò)如下：
[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對應(yīng)的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選擇器獲取對應(yīng)的label值
設(shè)置labelInValue值
這樣的話，F(xiàn)ormItem中設(shè)置initialValue時(shí)應(yīng)如下設(shè)置：
initialValue:{key:formVals.itemId,label:formVals.itemName},如果要清掉這種情況下的value值，請?jiān)O(shè)置為undefined
this.form.setFieldsValue({dep: undefined})7、Select選擇器傳遞自定義參數(shù)
<a-select @change="value => handleChange(value, param)" > </a-select>
handleChange的value參數(shù)即為默認(rèn)參數(shù)，param為自定義參數(shù)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue路由警告:Duplicate named routes definition問題
這篇文章主要介紹了vue路由警告:Duplicate named routes definition問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項(xiàng)目實(shí)戰(zhàn)總結(jié)篇
離放假還有1天，今天小編抽空給大家分享前端時(shí)間小編做的vue項(xiàng)目，非常完整，需要的朋友參考下2018-02-02
vue2.0結(jié)合DataTable插件實(shí)現(xiàn)表格動態(tài)刷新的方法詳解
這篇文章主要介紹了vue2.0結(jié)合DataTable插件實(shí)現(xiàn)表格動態(tài)刷新的方法,結(jié)合具體項(xiàng)目實(shí)例形式分析了vue2.0結(jié)合DataTable插件實(shí)現(xiàn)表格動態(tài)刷新過程中遇到的問題與相應(yīng)的解決方法,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了一個(gè)基于vue.js無縫滾動效果,文中給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue中使用render封裝一個(gè)select組件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
指令通常以"v-"作為前綴, 以方便Vue知道你在使用一種特殊的標(biāo)記。這篇文章主要介紹了vue2.0自定義指令的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Mixin是面向?qū)ο蟪绦蛟O(shè)計(jì)語言中的類,提供了方法的實(shí)現(xiàn),其他類可以訪問mixin類的方法而不必成為其子類在Vue中,可以使用mixin來擴(kuò)展組件的功能,本文給大家介紹了Vue中如何使用mixin擴(kuò)展組件功能,需要的朋友可以參考下2024-11-11
springboot+vue實(shí)現(xiàn)文件上傳下載
這篇文章主要為大家詳細(xì)介紹了springboot+vue實(shí)現(xiàn)文件上傳下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個(gè)組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-10