a-select下拉选择框的两种用法

AntDesign中a-select下拉选择框的两种用法

用法1

<template>
	<a-form-model-item>
        <a-select placeholder="请选择" :disabled="disabled" v-model="ruleForm.sqrXb" @change="handleChange">
                  <a-select-option value="01"> 男性 </a-select-option>
                  <a-select-option value="02"> 女性 </a-select-option>
        </a-select>
    </a-form-model-item>
</template>
<script>
	export default {
        data() {
            return {
              ruleForm: {
                  sqrXb:''
              }  
            }
        },
        methods: {
            handleChange(value) {
      		// sqrXb 申请户户主性别
      			this.ruleForm.sqrXb = value
    		},
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

用法2

<template>
	<a-select
     :disabled="disabled"
     placeholder="请选择"
     style="width: 90px"
     v-model="sqbList.sqhhzxb"
     @change="handleChange"
    >
    <a-select-option 
     :value="item.value" 
     v-for="item in xb" 
     :key="item.value"
     >
     {{item.value}}
    </a-select-option>
   </a-select>
</template>
<script>
	export default {
        data() {
            xb: [
                    { key: 0, value: '男性' },
                    { key: 1, value: '女性' },
                    // { key: 0, value: '不详' },
      			],
            return {
               sqbList: {
                   sqhhzxb:''
               } 
            }
        },
    	methods: {
            handleChange(value) {
      			// sqhhzxb 申请户户主性别
      			this.sqbList.sqhhzxb = value
    		},
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39