Ant design vue之a-select的用法

一、基本用法

<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" > 可以在此时做数据的请求