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

最新推荐文章于 2023-10-18 13:45:34 发布

一天不写代码就难受的小金

最新推荐文章于 2023-10-18 13:45:34 发布

阅读量3k

点赞数 2

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46016217/article/details/129010314

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

用法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>