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!' //觸發(fā)限制時的提示
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ?]?
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ?]"
? ? ? />
? ? </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(); //阻止默認操作
? ? ? this.form.validateFields((err, values) => { //獲取表單的值
? ? ? ? if (!err) {
? ? ? ? ?console.log(values) //values是表單里面所有值的集合，使用方法 例如 values.note
? ? ? ? }
? ? ? });
? ? },
? },6、獲取表單內(nèi)容，不做限制，單純獲取
methods: {
? ? handleSubmit(e) {
? ? ? e.preventDefault(); //阻止默認操作
? ? ? const values=this.form.getFieldsValue() //values是表單里面所有值的集合，使用方法 例如 values.note
? ? },
? },7、清空表單
this.form.resetFields();//在點擊 清空或重置按鈕時調(diào)用的函數(shù)中使用
8、修改表單內(nèi)容
this.form.setFieldsValue({
? ? note:"大可愛"
})9、默認內(nèi)容 表單中默認的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!' //觸發(fā)限制時的提示
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ?] ，
? ? ? ? ? ? ? ? ? ? ? ? ? ?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來篩選的.，如果需要按照篩選項的顯示的內(nèi)容來篩選, 應該把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值
這樣的話，F(xiàn)ormItem中設置initialValue時應如下設置：
initialValue:{key:formVals.itemId,label:formVals.itemName},如果要清掉這種情況下的value值，請設置為undefined
this.form.setFieldsValue({dep: undefined})7、Select選擇器傳遞自定義參數(shù)
<a-select @change="value => handleChange(value, param)" > </a-select>
handleChange的value參數(shù)即為默認參數(shù)，param為自定義參數(shù)
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇Vue 菜單欄點擊切換單個class(高亮)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08![elementui[el-table]toggleRowSelection默認多選事件無法選中問題](http://img.jbzj.com/images/xgimg/bcimg1.png)
elementui[el-table]toggleRowSelection默認多選事件無法選中問題
這篇文章主要介紹了elementui[el-table]toggleRowSelection默認多選事件無法選中問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了詳解vue 兼容IE報錯解決方案，詳細的介紹了幾種原因及其解決方案，非常具有實用價值，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue-cli 3 全局過濾器的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue2.0 vue-source jsonp 跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了解決vuecli3中img src 的引入問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
今天小編就為大家分享一篇解決在vue項目中webpack打包后字體不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
jeecgboot-vue3查詢區(qū)label文字居左實現(xiàn)過程解析
這篇文章主要為大家介紹了jeecgboot-vue3查詢區(qū)label文字居左實現(xiàn)過程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-08-08
這篇文章主要給大家介紹了關于vue3組件TS類型聲明的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
require是node中的一個方法,他的作用是用于引入模塊、 JSON、或本地靜態(tài)文件,這篇文章主要介紹了vue中的require使用,需要的朋友可以參考下2023-08-08