ant-design-vue 之form表单选中select使用

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>