antd vue v-decorator的取值與賦值問題
更新時間：2023年04月21日 16:42:19 作者：程序猿_liter
這篇文章主要介紹了antd vue v-decorator的取值與賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
antd vue v-decorator的取值與賦值
v-decorator 是 Ant Design 的控件驗證屬性。
經過 getFieldDecorator 或 v-decorator 包裝的控件，表單控件會自動添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），數據同步將被 Form 接管
這會導致以下結果：
- 你不再需要也不應該用 onChange 來做同步，但還是可以繼續(xù)監(jiān)聽 onChange 等事件。
- 你不能用控件的 value defaultValue 等屬性來設置表單域的值，默認值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
- 你不應該用 v-model，可以使用 this.form.setFieldsValue 來動態(tài)改變表單值。
定義form：
<template>
? <div class="main">
? ? <a-form
? ? ? id="formLogin"
? ? ? class="user-layout-login"
? ? ? ref="formLogin"
? ? ? :form="form"
? ? ? @submit="handleSubmit"
? ? >
? ? ? ? <a-form-item>
? ? ? ? ? ? <a-input
? ? ? ? ? ? ? size="large"
? ? ? ? ? ? ? type="text"
? ? ? ? ? ? ? placeholder="賬戶: "
? ? ? ? ? ? ? v-decorator="[
? ? ? ? ? ? ? ? 'username',
? ? ? ? ? ? ? ? {initialValue:'',rules: [{ required: true, message: '請輸入帳戶名或郵箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
? ? ? ? ? ? ? ]"
? ? ? ? ? ? >
? ? ? ? ? ? ? <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
? ? ? ? ? ? </a-input>
? ? ? ? ? </a-form-item>
? ? </a-form>
?</div>
</template>
?
<script>
...
export default {
? ...
? data () {
? ? return {
? ? ? ...
? ? ? form: this.$form.createForm(this),
? ? }
? },
? created () {
? ??
? },
? ...
}
</script>v-decorator 取值：
this.form.validateFields((err, values) => {
? // 這里做邏輯處理
? console.log(values) // { username: '' }
})v-decorator 賦值：
this.form.setFieldsValue({
? username: '設置值'
})清空表單數據：
this.form.resetFields
ant design vue之v-decorator問題
1.在template中直接使用
required: true 設置必填, trigger: 'blur' 設置失去焦點觸發(fā)校驗
<a-input
? v-decorator="['name', { rules: [{ required: true, message: '請輸入賬號!'}],trigger: 'blur' }]"?
?/>2.在script中設置校驗規(guī)則
template 部分
?<a-input ? ?v-decorator="['password', validatorRules.password]" ?/>
script 部分
? ?data(){
? ? return {
? ? ? ?form: this.$form.createForm(this),
? ? ? ?validatorRules: {
? ? ? ? ? password : {//name與v-decorator中屬性對應
? ? ? ? ? ? initialValue: 123456,//初始值
? ? ? ? ? ? rules: [
? ? ? ? ? ? ? { required: true, message: '請輸入密碼!'},//此處開啟校驗必填
? ? ? ? ? ? ? { min: 5, message: '長度不少于 5 個字符'}, // 長度校驗
? ? ? ? ? ? ? { validator: this.validatePassword},//校驗規(guī)則函數，
? ? ? ? ? ? ],
? ? ? ? ? ? trigger: 'blur' // 觸發(fā)方式
? ? ? ? ? },
? ? ? ? },
? ? }
? },
? ?methods: {
? ? ? validatePassword(rule, value, callback) {
? ? ??
? ? ? }
? }3. 完整代碼
<template>
? <div class="login">
? ? <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
? ? <a-form-item label="name">
? ? ? <!-- 直接寫檢驗規(guī)則 -->
? ? ? <a-input
? ? ? ? ?v-decorator="['name', { rules: [{ required: true, message: '請輸入賬號!'}],trigger: 'blur' }]"?
? ? ? />
? ? </a-form-item>
? ? <a-form-item label="password">
? ? ? <!-- 在script 里面定義更復雜的檢驗規(guī)則, ?-->
? ? ? <a-input
? ? ? ? v-decorator="['password', validatorRules.password]"
? ? ? />
? ? </a-form-item>
? ? <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
? ? ? <a-button type="primary" html-type="submit">
? ? ? ? Login
? ? ? </a-button>
? ? </a-form-item>
? </a-form>
? </div>
</template>
<script>
export default {
? name: 'login',
? data(){
? ? return {
? ? ? ?form: this.$form.createForm(this),
? ? ? ?validatorRules: {
? ? ? ? ? password : {//name與v-decorator中屬性對應
? ? ? ? ? ? initialValue: 123456,//初始值
? ? ? ? ? ? rules: [
? ? ? ? ? ? ? { required: true, message: '請輸入密碼!'},//此處開啟校驗必填
? ? ? ? ? ? ? { min: 5, message: '長度不少于 5 個字符'}, // 長度校驗
? ? ? ? ? ? ? { validator: this.validatePassword},//校驗規(guī)則函數，
? ? ? ? ? ? ],
? ? ? ? ? ? trigger: 'blur' // 觸發(fā)方式
? ? ? ? ? },
? ? ? ? },
? ? }
? },
? created(){
? ? // this.$nextTick(() => {
? ? // ? ? this.form.setFieldsValue({name:'yyy',password: 123});
? ? // ? })
? },
? mounted(){
? ? this.form.setFieldsValue({name:'yyy',password: 123});
? },
? methods: {
? ? ?handleSubmit(e) {
? ? ? e.preventDefault();
? ? ? this.form.validateFields((err, values) => {
? ? ? ? if (!err) {
? ? ? ? ? console.log('Received values of form: ', values);
? ? ? ? }
? ? ? });
? ? },
? ? validatePassword(rule, value, callback) {
? ? ??
? ? }
? }
}
</script>注意：
確保使用 this.form.setFieldsValue({name:'yyy',password: 123}) 設置值
或者 this.form.validateFields((err, values) => { }); 獲取值
之前
已經 this.$form.createForm(this)
如果在鉤子函數里面使用 setFieldsValue 報類似錯誤
warning.js?d96e:34 Warning: You cannot set a form field before rendering a field associated with the value. You can use `getFieldDecorator(id, options)` instead `v-decorator="[id, options]"` to register it before render.
可以這樣試下
this.$nextTick(() => {
? this.form.setFieldsValue({name:'yyy',password: 123});
})總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue3 teleport的使用demo,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細介紹了Vue如何利用xlsx-style庫實現導出Excel并修改樣式的功能,文中的示例代碼講解詳細,有需要的可以參考下2024-01-01
這篇文章主要為大家詳細介紹了vue-router原理并實現一個小demo，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了Vue.js 實現數據展示全部和收起功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
關于vue使用ant design vue,打包后a-date-picker控件無法選擇日期的問題
這篇文章主要介紹了關于vite .env.test環(huán)境使用ant design vue,打包后a-date-picker控件無法選擇日期的問題,本文針對這個問題提供了解決方法,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue實現拖拽穿梭框功能四種方式,使用原生js實現拖拽，VUe使用js實現拖拽穿梭框，結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
今天小編就為大家分享一篇Vue-router 切換組件頁面時進入進出動畫方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue項目代碼之路由拆分、Vuex模塊拆分、element按需加載詳解
這篇文章主要介紹了Vue項目代碼之路由拆分、Vuex模塊拆分、element按需加載,項目較大路由較多時，路由拆分是一個不錯的代碼優(yōu)化方案，按不同業(yè)務分為多個模塊，結構清晰便于統(tǒng)一管理，本文通過示例給大家詳細講解，需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了vue實現列表無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue-router 組件的高級應用,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04