ant-design-vue 之form表單選中select使用

01) 一般select

@change="handleChangeFei" 可以獲取key 和 val (默認有2個參數) 

handleChangeFei(value,option) {
    console.log(value, option.key,option.data.key); // 史記, 02 , 02
},

 

　　demo:選中后獲取key 和 val

<template>
    <div>
        <a-form  :form="form">

            <a-form-item label="圖書">
                <a-select style="width: 120px" placeholder="請選擇" @change="handleChangeFei">
                    <a-select-option v-for="items in select_data" :key="items.select_key" :value="items.select_val">
                        {{items.select_val}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            
        </a-form>
    </div>
</template>
<script>

    /* 這是ant-design-vue */
    import Vue from 'vue'
    import Antd, { message,Select } from 'ant-design-vue'  //這是ant-design-vue
    import 'ant-design-vue/dist/antd.css'
    Vue.use(Antd);
    /* 這是ant-design-vue */

    const select_data = [
        {select_key: "01", select_val: "論語"},
        {select_key: "02", select_val: "史記"},
        {select_key: "03", select_val: "左傳"},
        {select_key: "04", select_val: "漢書"},
        {select_key: "05", select_val: "戰國策"},
    ];
    
    export default {
        components:{},
        data() {
            return {
                form: this.$form.createForm(this),// form 表單
                select_data,
            }
        },
        methods: {
            handleChangeFei(value,option) {
                console.log(value, option.key,option.data.key); // 史記, 02 , 02
            },
        },
    };
</script>

<style scoped>

</style>

 

 

 

02) 包裝過的select

使用  :form="form"  和   v-decorator 包裝過的select 

label-in-value 獲取key和label,  initialValue 設置默認值

web_decorator_sex: ['web_decorator_sex',{rules: [{ required: true, message: '請選性別' }]}],
web_decorator_sex_02: ['web_decorator_sex_02', {initialValue: {key: "2", label: "女"}, rules: [{required: true, message: '請選性別'}]}]

*** 注意加了:form="form" 觀察  default-value 屬性在的變化 ***
1. 你不再需要也不應該用 onChange 來做同步，但還是可以繼續監聽 onChange 等事件。
2. 你不能用控件的 value defaultValue 等屬性來設置表單域的值，默認值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
3. 你不應該用 v-model，可以使用 this.form.setFieldsValue 來動態改變表單值。

官方解釋: ant-design-vue

demo: 默認選中女,選中獲取key和label
這只默認的時候要  {key: "2", label: "女"}  這樣格式,否則 v-decorator 獲取數據會少

<template>
    <div>
        <h3>默認選中女</h3>
        <h3>選中獲取key和label</h3>
        
        <a-form>
            <a-form-item label="性別">
                <a-select label-in-value  :default-value="{key:'2', label: '女'}" @change="handleChange">
                    <a-select-option  v-for="items in select_data"
                                      :key="items.select_key">{{items.select_val}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            
            
            <a-form-item label="性別_02">
                <a-select label-in-value :default-value="{key:'2', label: '女'}" v-decorator="web_decorator_sex"  @change="handleChange">
                    <a-select-option  v-for="items in select_data"
                                      :key="items.select_key">{{items.select_val}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            
        </a-form>
        
        
        
        <hr><hr>

        
        <a-form :form="form">
            <a-form-item label="性別">
                <a-select label-in-value  :default-value="{key:'2', label: '女'}" @change="handleChange">
                    <a-select-option  v-for="items in select_data"
                                      :key="items.select_key">{{items.select_val}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            
            <a-form-item label="性別_02">
                <a-select label-in-value v-decorator="web_decorator_sex_02"  @change="handleChange">
                    <a-select-option  v-for="items in select_data"
                                      :key="items.select_key">{{items.select_val}}
                    </a-select-option>
                </a-select>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
    
    /* 這是ant-design-vue */
    import Vue from 'vue'
    import Antd, { message,Select } from 'ant-design-vue'  //這是ant-design-vue
    import 'ant-design-vue/dist/antd.css'
    Vue.use(Antd);
    /* 這是ant-design-vue */

    const select_data = [
        {select_key: "1", select_val: "男"}, // 這里的select_key 使用字符串,其他地方也要是字符串
        {select_key: "2", select_val: "女"},
    ];
    
    export default {
        data() {
            return {
                form: this.$form.createForm(this),
                select_data,
                web_decorator_sex: ['web_decorator_sex', {rules: [{required: true, message: '請選性別'}]}],
                web_decorator_sex_02: ['web_decorator_sex_02', {
                    initialValue: {key: "2", label: "女"},
                    rules: [{required: true, message: '請選性別'}]
                }]
            }
        },

        methods: {
            handleChange(value) {
                console.log(value);
                console.log(value.key,"__",value.label.trim());
            }
        },
    };
</script>

<style scoped>
 
</style>