# UCascader 级联选择 - [示例](#示例) - [基本用法](#基本用法) - [Placeholder](#placeholder) - [触发方式](#触发方式) - [禁用某项](#禁用某项) - [可清空](#可清空) - [仅显示最后一级](#仅显示最后一级) - [双向绑定](#双向绑定) - [级联间连接字符](#级联间连接字符) - [过滤（可搜索）](#过滤可搜索) - [field](#field) - [动态加载](#动态加载) - [size](#size) - [API]() - [Props/Attrs](#propsattrs) - [Events](#events) - [Methods](#methods) **Selector** 一次选择多个相关联的项 ## 示例 ### 基本用法 ``` html ``` ### Placeholder ``` html ``` ### 触发方式 使用trigger属性设置触发方式，默认为click。 ``` vue ``` ### 禁用某项 通过在数据源中设置 disabled 字段来声明该选项是禁用的,也可以是整个级联框 ``` vue ``` ### 可清空 通过 clearable 设置输入框可清空 ``` vue ``` ### 仅显示最后一级 仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。 属性showFinalValue定义了是否显示完整的路径，将其赋值为true则仅显示最后一级 ``` vue ``` ### 双向绑定 使用`v-model`进行双向绑定。 ``` vue ``` ### 级联间连接字符 join定义每一层级联之间的各个连接符，默认为：' / ',不允许为空值 ``` vue ``` ### 过滤（可搜索） 设置filterable属性即可开启过滤功能,解锁手动输入,用于快速查找选项。 ``` vue ``` ### field 自定义文本字段，默认为text ``` vue ``` ### 动态加载 通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)，否则会简单的以有无子节点来判断是否为叶子节点。 ``` vue ``` ### size 提供几个可选的值定义级联选择框的大小 ``` vue ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | data-source | Array\<{ text, value }\> | | | 展示数据的输入源，可设置为数据集对象或者返回数据集的逻辑 | | data-schema | schema | | | 数据源返回的数据结构的类型，自动识别类型进行展示说明 | | field | string | | `'text'` | 集合的元素类型中，用于显示文本的属性名称 | | value-field | string | | `'value'` | 集合的元素类型中，用于标识选中值的属性 | | children-field | string | | `'children'` | 树形数据子节点字段名，默认为children | | parent-field | string | | | 当数据源为平铺数据时自动生成级联数据的节点字段名，重要：值字段名需要一起配置 | | value.sync, v-model | any | | | | | useArrayLikeValue | boolean | | `false` | | | filterable | boolean | | `false` | 设置是否可以筛选，开启将会显示搜索框。 | | placeholder | string | | `'请选择'` | 为空时显示的占位符文本 | | showFinalValue | boolean | | `false` | 定义是否显示完整的路径，ture时只显示最后一项 | | autofocus | boolean | | `false` | 设置是否自动获取焦点 | | trigger | string | `[object Object]`
`[object Object]` | `'click'` | | | clearable | boolean | | `false` | 设置是否可以清空搜索框，开启后将在有内容时显示清除按钮。 | | disabled | boolean | | `false` | 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） | | opened | boolean | | `false` | 弹出状态分为“True(弹出)/False(关闭)”，默认为“弹出” | | width | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 设置级联框宽度大小 | | height | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 设置级联框高度大小 | | join | string | `[object Object]`
`[object Object]`
`[object Object]` | `' / '` | 将选中的值以选择的符号作为连接符，转为字符串格式,不可为空值 | ### Events #### @input 选择某一项时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | any | 选择项的值 | | senderVM | UCascader | 发送事件实例 | #### @select 选择某一项时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.level | number | 选择的层级 | | $event.value | any | 改变后的值 | | $event.values | Array | 改变后每项值的数组 | | senderVM | UCascader | 发送事件实例 | #### @focus 获得焦点时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | FocusEvent | 原生事件对象 | | senderVM | UInput | 发送事件实例 | #### @blur 失去焦点时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | FocusEvent | 原生事件对象 | | senderVM | UInput | 发送事件实例 | #### @clear 清空后触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | string | 清空后的值 | | $event.oldValue | string | 旧的值 | | senderVM | UInput | 发送事件实例 | #### @before-load 加载前触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.preventDefault | Function | 阻止加载流程 | | senderVM | UTableView | 发送事件实例 | #### @load 加载后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | null | 无 | | senderVM | UTableView | 发送事件实例 | Methods #### open() 弹出实例。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### close() 关闭实例。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### clear() 清空输入框。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### reload() 重新加载数据 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- |