vue antd中的select用法

原创已于 2024-07-08 16:45:28 修改 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

antdDesign 同时被 2 个专栏收录

2 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文详细介绍了Ant Design Select组件的各种用法，包括基本选择、下拉框大小调整、标签展示、多选模式、带搜索框的下拉框、清除选项功能以及禁用状态的设置。通过示例代码展示了如何实现这些功能，帮助开发者更好地理解和使用Select组件。

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