### 基本用法默认为单选模式，通过`placeholder`属性设置初始占位符，使用`v-model`双向绑定值。添加选择项有三种方式： #### tag 方式使用``组件添加。在有少量静态数据的时候，推荐使用这种方式。 ``` html

Java

Node.js

Python

Ruby

PHP

Java

Node.js

Python

Ruby

PHP

``` #### data-source 数组在有较大量数据时，推荐使用这种方式。直接向`data-source`属性中传入`Array`格式的数组，每个`Item`为这样格式的对象`{ text: string, value: any, disabled: boolean, ... }`。 ``` vue ``` #### data-source 函数向`data-source`属性中传入一个加载函数，这种方式会自动处理 loading 加载、error 错误等效果，并且在下文中的加载更多、过滤（搜索）等功能均需要采用这种传入数据的方式。加载函数的格式是这样的 ``` ts (params) => Promise | { data: Array, total: number } | { data: Array, last: boolean }> ``` 组件会给加载函数提供过滤（搜索）、加载更多等参数，要求返回一个如上的 Promise。 ``` vue ``` #### 指定选项字段名如果你的数据中选项文本和值的字段不一定叫`'text'`和`'value'`，可以通过`text-field`和`value-field`两个属性快速指定。 ``` vue ``` ### 禁用状态、禁用某一项 ``` vue ``` #### 为空禁用有时在没有数据的情况下，不希望用户进行选择。使用`empty-disabled`属性自动禁用掉这种情况。 ``` html ``` #### 自动获取焦点 #### autofocus ``` html

Java

Python

Node.js

.NET

PHP

苹果

香蕉

蛋糕

``` ### 分隔符 ``` html

水杯

牙刷

坚果

毛巾

沙发

``` ### 分组 ``` html

毛巾

牙刷

牙缸

水杯

筷子

碗

``` ### 可清除 ``` vue ``` ### 多项选择使用`multiple`属性开启多选模式。注意：此时`v-model`双向绑定的类型为一个数组`Array`。 ``` vue ``` 值转换器：组件的 value 与各选择器的 value 的转换器。 converter值可以为`'join'``'json'`，表示将 values 数组 join 之后变成 value。`'join'`的分隔符可以是`','`,`'|'`等，默认是`','`。 ``` vue ``` ``` vue ``` 设置属性text形式 ``` vue ``` ### Tags 风格 Tags 过多时如何显示。 ``` vue ``` ### 可以重复设置`duplicated`属性可以让选项重复。 ``` vue ``` ### 其它样式 #### Flag ``` html

苹果

香蕉

蛋糕

``` #### Label ``` html

1核

2核

4核

``` ### 修改尺寸通过`size`属性设置`mini`、`small`、`normal`、`medium`、`large`、`huge`、`full`几种尺寸，宽高可以自由组合。如果以上几种预设不能满足，也可以直接添加`style="width: 240px;"`来设置。 ``` html

C++

``` ### 过滤（搜索） #### 前端过滤（搜索）如果数据源本身为前端数据或是从后端一次性拿过来的，设置`filterable`属性即可开启过滤功能。用于快速查找选项。 ``` vue ``` #### 匹配方式在`match-method`属性中可以配置字符串的匹配方式，常见的有`includes`、`startsWith`、`endsWith`，也可以传一个函数。 ``` vue ``` #### 区分大小写默认不区分大小写，可用`case-sensitive`属性开启。 ``` vue ``` ### 后端过滤（搜索）如果需要通过后端接口进行过滤，在开启`filterable`属性的基础上，还要开启`remote-filtering`属性。这时需要用最前面提到的 data-source 函数的方式传入数据。加载函数的格式是这样的`({ filterText: string }) => Promise, total: number } | { data: Array, last: boolean }>>`。组件会给加载函数提供过滤输入框中的文本，要求返回一个 Promise。可以看下面的示例，在数据栏中`result`为最新一次模拟请求的返回数据。 ``` vue ``` ### 自动补充在过滤（搜索）的基础上，使用`auto-complete`属性可以开启自动补充功能，可以将不在选项中的文本添加成选项。 ``` vue ``` ### 前端加载更多如果数据源本身为前端数据或是从后端一次性拿过来的，设置`pageable`或`pageable="auto-more"`即可开启前端加载更多功能，用`page-size`属性修改分页大小。 ``` vue ``` ### 后端加载更多如果需要通过后端接口进行加载更多，在开启`pageable`属性的基础上，还要开启`remote-paging`属性。这时需要用最前面提到的 data-source 函数的方式传入数据。加载函数的格式是这样的： ``` ts ({ paging: { size: number, // 每页大小 number: number, // 页数。从1开始计 offset: number, // 偏移量：(number - 1) * size limit: number, // 同 size } }) => Promise | { data: Array, total: number } | { data: Array, last: boolean }> ``` 组件会给加载函数提供分页信息或加载位置的参数，要求返回如上的一个 Promise。翻页是否到底，如果 Promise 的结果为： - `{ data: Array, total: number }`，根据 total 数值判断是否翻到最底部 - `{ data: Array, last: boolean }`，根据 last 布尔值判断是否为最后一次 - `Array`，则根据数组为空判断为最后一次可以看下面的示例，在数据栏中`result`为最新一次模拟请求的返回数据。 ``` vue ``` #### 前缀方式使用``组件添加。在有少量静态数据的时候，推荐使用这种方式。 ``` html

Java

Node.js

Python

Ruby

PHP

Java

Node.js

Python

Ruby

PHP

``` #### 自定义可扩展下拉项开启可扩展下拉项后即`showRenderFooter`为 `true`，可使用 `renderFooter`插槽对下拉菜单进行自由扩展 ``` vue ```