一、基本用法
<a-select default-value="lucy" style="width: 120px" @change="handleChange">
<a-select-option value="jack"> Jack </a-select-option>
<a-select-option value="lucy"> lucy </a-select-option>
</a-select>
二、基本属性
value 选中option选项
<a-select :value="lucy" style="width: 120px" @change="handleChange">
<a-select-option value="jack"> Jack </a-select-option>
<a-select-option value="lucy"> lucy </a-select-option>
</a-select>
lucy在data中定义
defaultValue 默认值
<a-select default-value="lucy" style="width: 120px" @change="handleChange">
<a-select-option value="jack"> Jack </a-select-option>
<a-select-option value="lucy"> lucy </a-select-option>
</a-select>
三、v-model动态绑定select值
<a-select v-model="selectedItems" mode="multiple" placeholder="Inserted are removed" >
<a-select-option value="jack"> Jack </a-select-option>
<a-select-option value="lucy"> lucy </a-select-option>
</a-select>
四、select的change事件
选中的option发生变化的时候
<a-select label-in-value :default-value="{ key: 'lucy' }" style="width: 120px" @change="handleChange" >
<a-select-option value="jack"> Jack (100) </a-select-option>
<a-select-option value="lucy"> Lucy (101) </a-select-option>
</a-select>
五、下拉框的mode属性
<a-select mode="multiple" :default-value="['a1', 'b2']" style="width: 100%" placeholder="Please select" @change="handleChange" >
六、v-for动态渲染select选项
<a-select mode="multiple">
<a-select-option
v-for="item in roleList"
:key="item.roleId"
:value="item.roleId"
>{{item.roleName}}</a-select-option>
</a-select>
七、展开下拉菜单的回调dropdownVisibleChange
<a-select mode="multiple" :default-value="['a1', 'b2']" style="width: 100%" placeholder="Please select" @dropdownVisibleChange="handleChange" > 可以在此时做数据的请求