欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

antd vue v-decorator的取值與賦值問題

 更新時(shí)間：2023年04月21日 16:42:19   作者：程序猿_liter  
這篇文章主要介紹了antd vue v-decorator的取值與賦值問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

antd vue v-decorator的取值與賦值

v-decorator 是 Ant Design 的控件驗(yàn)證屬性。

經(jīng)過 getFieldDecorator 或 v-decorator 包裝的控件，表單控件會自動(dòng)添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），數(shù)據(jù)同步將被 Form 接管

這會導(dǎo)致以下結(jié)果：

  • 你不再需要也不應(yīng)該用 onChange 來做同步，但還是可以繼續(xù)監(jiān)聽 onChange 等事件。
  • 你不能用控件的 value defaultValue 等屬性來設(shè)置表單域的值，默認(rèn)值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
  • 你不應(yīng)該用 v-model，可以使用 this.form.setFieldsValue 來動(dòng)態(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: '設(shè)置值'
})

清空表單數(shù)據(jù)：

this.form.resetFields

ant design vue之v-decorator問題

1.在template中直接使用

required: true 設(shè)置必填, trigger: 'blur' 設(shè)置失去焦點(diǎn)觸發(fā)校驗(yàn)

<a-input
? v-decorator="['name', { rules: [{ required: true, message: '請輸入賬號!'}],trigger: 'blur' }]"?
?/>

2.在script中設(shè)置校驗(yàn)規(guī)則

template 部分

?<a-input
? ?v-decorator="['password', validatorRules.password]"
?/>

script 部分

? ?data(){
? ? return {
? ? ? ?form: this.$form.createForm(this),
? ? ? ?validatorRules: {
? ? ? ? ? password : {//name與v-decorator中屬性對應(yīng)
? ? ? ? ? ? initialValue: 123456,//初始值
? ? ? ? ? ? rules: [
? ? ? ? ? ? ? { required: true, message: '請輸入密碼!'},//此處開啟校驗(yàn)必填
? ? ? ? ? ? ? { min: 5, message: '長度不少于 5 個(gè)字符'}, // 長度校驗(yàn)
? ? ? ? ? ? ? { validator: this.validatePassword},//校驗(yàn)規(guī)則函數(shù)，
? ? ? ? ? ? ],
? ? ? ? ? ? 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">
? ? ? <!-- 直接寫檢驗(yàn)規(guī)則 -->
? ? ? <a-input
? ? ? ? ?v-decorator="['name', { rules: [{ required: true, message: '請輸入賬號!'}],trigger: 'blur' }]"?
? ? ? />
? ? </a-form-item>
? ? <a-form-item label="password">
? ? ? <!-- 在script 里面定義更復(fù)雜的檢驗(yàn)規(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中屬性對應(yīng)
? ? ? ? ? ? initialValue: 123456,//初始值
? ? ? ? ? ? rules: [
? ? ? ? ? ? ? { required: true, message: '請輸入密碼!'},//此處開啟校驗(yàn)必填
? ? ? ? ? ? ? { min: 5, message: '長度不少于 5 個(gè)字符'}, // 長度校驗(yàn)
? ? ? ? ? ? ? { validator: this.validatePassword},//校驗(yàn)規(guī)則函數(shù)，
? ? ? ? ? ? ],
? ? ? ? ? ? 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}) 設(shè)置值

或者 this.form.validateFields((err, values) => { }); 獲取值

之前

已經(jīng) this.$form.createForm(this)

如果在鉤子函數(shù)里面使用 setFieldsValue 報(bào)類似錯(cuò)誤

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});
})

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

相關(guān)文章

最新評論