# customthree-tree-select 使用指南 **提示:** 使用该插件前确保你已经导入 `uni-popup` `uni-icons` `uni-easyinput` 插件。 **有问题可以加 QQ 群:297080738** ## 优势 💪:基于 `uni-popup`、 `uni-icons`、 `uni-easyinput` 插件进行开发,默认样式与 `uni-easyinput` 样式对标。 ⚡:全面支持懒加载应对大量数据。 🚀:v-model 绑定数据、数据回显、移除选项。 ⚙ :提供更多配置项。 📦:开箱即用。 ## Props | 属性名 | 类型 | 默认值 | 说明 | | :--------------------: | :-----------------: | :-------------: | :----------------------------------------------------------: | | canSelectAll | Boolean | false | 开启一键全选功能 | | clearResetSearch | Boolean | false | 设置为 `true` 并且搜索之后,点击输入框清除按钮,会清空搜索内容并且会直接重置整个弹窗内树形选择器内容,默认情况下只有清除之后再次进行查询才会重置选择器 | | animation | Boolean | ture | 是否开启弹窗动画 | | is-mask-click | Boolean | true | 点击遮罩关闭弹窗 | | mask-background-color | String | rgba(0,0,0,0.4) | 蒙版颜色,建议使用 rgba 颜色值 | | background-color | String | none | 主窗口背景色 | | safe-area | Boolean | true | 是否适配底部安全区 | | **choseParent** | **Boolean** | **false** | **父节点是否可选** | | **linkage** | **Boolean** | **false** | **父子节点是否联动** | | placeholder | String | 请选择 | 空状态信息提示、弹窗标题 | | confirmText | String | 完成 | 确定按钮文字 | | confirmTextColor | String | #007aff | 确定按钮文字颜色 | | dataSource | Array | - | 展示的数据 | | **dataLabel** | **String** | **name** | **dataSource 中对应数据的 label** | | **dataValue** | **String** | **id** | **dataSource 中对应数据的 value** | | **dataChildren** | **String** | **children** | **dataSource 中对应数据的 children** | | clearable | Boolean | false | 是否显示清除按钮,点击清除所有已选项 | | **mutiple** | **Boolean** | **false** | **是否可以多选** | | **disabled** | **Boolean** | **false** | **是否允许修改** | | search | Boolean | false | 是否可以搜索(常用于数据较多的情况) | | showChildren | Boolean | false | 默认不展开(数据内部 showChildren 属性优先级更高,可以设置全局收起,单独展开某一条数据) | | border | Boolean | false | 显示引导线 | | load | Function | function(){} | lazyLoadChildren 设置为true 后,点击某个节点发送请求获取子节点数据,用法见下方异步懒加载示例 | | lazyLoadChildren | Boolean | false | 是否开启异步懒加载节点 | | **v-model/modelValue** | **Array \| String** | **[ ]** | **已选择的值,通过 v-model 进行绑定,例如:v-model="formData.selectedList" ,根据你绑定数据的类型自动返回相同类型的数据,String 类型通过 `,` 进行分隔** | | deleteSource | Boolean | false | 是否可删除已选数据 ## Events | 事件名称 | 说明 | 返回值 | | ----------------- | ------------------------ | ------------------------------------------- | | change | 弹窗组件状态发生变化触发 | e={show: true | false,type:当前模式} | | maskClick | 点击遮罩层触发 | | | update:modelValue | 选中数据或取消选中时触发 | 以数组形式返回已选择数据的 dataValue 对应值 | | select-change | 选中数据或取消选中时触发 | 以数组形式返回选中数据完整信息 | | removeSelect | 从选择框内删除元素时触发 | | ## 基础使用示例 ```vue ``` ## 禁用某些选项,或隐藏某些选项 ```vue ``` ## 异步懒加载 ```vue ```