vue antd中的select用法

什么小蛋挞**

已于 2023-07-24 11:03:41 修改

阅读量1.5k

点赞数

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

于 2022-11-14 08:32:18 首次发布

本文链接：https://blog.csdn.net/queen_css/article/details/127762330

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

antdDesign

1 篇文章 0 订阅

订阅专栏

1、基本用法

<a-select
  v-model:value="value1"
  style="width: 120px"
>
  <a-select-option value="jack">Jack</a-select-option>
  <a-select-option value="lucy">Lucy</a-select-option>
  <a-select-option value="disabled" disabled>Disabled</a-select-option>
  <a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>

2、下拉框大小在标签内添加属性 size

:size="large" //large、middle、small

3、标签在标签内添加 mode="tags"

<a-select
  v-model:value="value1"
  style="width: 120px"
  mode="tags"
>
  <a-select-option value="jack">Jack</a-select-option>
  <a-select-option value="lucy">Lucy</a-select-option>
  <a-select-option value="disabled" disabled>Disabled</a-select-option>
  <a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>

4、多选在标签中添加属性 mode="multiple"

<a-select
  v-model:value="value1"
  style="width: 120px"
  mode="multiple"
>
  <a-select-option value="jack">Jack</a-select-option>
  <a-select-option value="lucy">Lucy</a-select-option>
  <a-select-option value="disabled" disabled>Disabled</a-select-option>
  <a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>

5、带搜索框 show-search

<a-select
  v-model:value="value1"
  style="width: 120px"
  show-search
>
  <a-select-option value="jack">Jack</a-select-option>
  <a-select-option value="lucy">Lucy</a-select-option>
  <a-select-option value="disabled" disabled>Disabled</a-select-option>
  <a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>

6、框内的内容可清除 allowClear="true"

<a-select
  v-model:value="value1"
  style="width: 120px"
  allowClear="true"
>
  <a-select-option value="jack">Jack</a-select-option>
  <a-select-option value="lucy">Lucy</a-select-option>
  <a-select-option value="disabled" disabled>Disabled</a-select-option>
  <a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>

7、禁用 disabled="true"

<a-select
  v-model:value="value1"
  style="width: 120px"
  disabled
>
  <a-select-option value="jack">Jack</a-select-option>
  <a-select-option value="lucy">Lucy</a-select-option>
  <a-select-option value="disabled" disabled>Disabled</a-select-option>
  <a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>

8、在多选下拉框中 maxTagCount 最多显示多少个 tag