# UCascadeSelect 级联选择 - [示例](#示例) - [基本用法](#基本用法) - [Placeholder](#placeholder) - [隐藏空列表](#隐藏空列表) - [值转换器](#值转换器) - [大小扩展](#大小扩展) - [API]() - [Props/Attrs](#propsattrs) - [Events](#events) **Selector** 一次选择多个相关联的项 ## 示例 ### 基本用法 ``` html ``` ### Placeholder ``` html ``` ### 隐藏空列表 ``` html ``` ### 值转换器 组件的 value 与 各选择器的 value 的转换器。 #### join 默认为`'join'`，表示将 values 数组 join 之后变成 value。这种情况下 value 一般不会重复，推荐使用。 ``` vue ``` `'join.number'`与`join`类似，只是会考虑它为数字的情况。 `'join:,'`，还可以用`:`修改分隔符，类似 Vue 的指令参数。 ``` vue ``` #### last-value `'last-value'`表示以最后一项的值作为 value，如果每一项的值是唯一的，可以用这种方法。 ``` vue ``` ### 大小扩展 ``` html ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | data | Array\<{ text, value }\> | | | 数据列表 | | value.sync, v-model | any | | | | | categories | Array\<{ label, key, placeholder }\> | | | 多级分类 | | hide-empty | boolean | | `false` | 是否隐藏空列表 | | converter | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'join'` | 将选中的值以选择的符号作为连接符，转为字符串格式；选择“json”则转为JSON字符串格式 | | field | string | | `'text'` | 显示文本字段 | | readonly | boolean | | `false` | | | disabled | boolean | | `false` | | ### Events #### @input 选择某一项时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | any | 选择项的值 | | senderVM | UCascadeSelect | 发送事件实例 | #### @select 选择某一项时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.level | number | 选择的层级 | | $event.value | any | 改变后的值 | | $event.values | Array | 改变后每项值的数组 | | $event.item | object | 选择项相关对象 | | $event.itemVM | ListViewItem | 选择项子组件 | | senderVM | UCascadeSelect | 发送事件实例 | #### @change 选择值改变时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 改变后的值 | | $event.oldValue | any | 旧的值 | | $event.values | Array | 改变后每项值的数组 | | $event.oldValues | Array | 旧的每项值的数组 | | senderVM | UCascadeSelect | 发送事件实例 |