YbTreeSelect 树型选择器
将 el-select (opens new window) 和 el-tree (opens new window) 组合在一起的树型选择器,并可以根据节点的数量从 el-tree
切换成yb-cascader-list
注意:旧版 api 已废弃,在下一个主版本将完全去除。本版本对旧版 api 做了兼容,仍可继续使用旧版 api,请逐步替换成新版 api,详情见Props。
# 基本使用
el-select
的属性通过 selectOptions
对象传入,el-tree
的属性通过 treeOptions
对象传入,必须指定 el-tree
的 nodeKey
复制
# 事件监听
el-select
的事件通过 selectEvents
对象传入, el-tree
的属性通过 treeEvents
对象传入
复制
# 可筛选
设置 el-select 的 filterable
为 true ,可开启筛选功能。
复制
# 多选
多选需要同时启用 el-select 的 multiple
和 el-tree 的 showCheckbox
复制
# Props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 绑定值 | boolean / string / number | -- | -- |
selectOptions | el-select 的属性 (opens new window),需使用驼峰写法,不支持 value | object | -- | {} |
treeOptions | el-tree 的属性 (opens new window),需使用驼峰写法 | object | -- | {} |
selectEvents | el-select 的事件 (opens new window) | object | -- | {} |
treeEvents | el-tree 的事件 (opens new window) | object | -- | {} |
el-tree 还是 yb-cascader-list。 若值为 auto ,则根据 limitCount 自动计算 | string | tree/cascader/auto | auto | |
limitCount | yb-cascader-list ,否则为 el-tree | number | -- | 100 |
已废弃,请使用 treeOptions.data 代替 | ||||
已废弃,请使用 treeOptions.props 代替 | ||||
已废弃,请使用 treeOptions.nodeKey 代替 | ||||
已废弃,请使用 treeOptions.nodeKey 代替 | ||||
已废弃,请同时使用 selectOptions.multiple 和 treeOptions.showCheckbox 代替 | ||||
已废弃,请使用 treeOptions.checkStrictly 代替 |
# Methods
方法调用方式应该是 this.$refs['tree']['methodName']()
方法名称 | 说明 | 参数 | 返回值 |
---|---|---|---|
getSelect | 获取 el-select 实例 | - | |
getTree | 获取 el-tree 实例 | - | |
getSelectedNodes | 已废弃 | - | object|object[] |
# Events
事件名称 | 说明 | 参数 |
---|---|---|
change | 选中值发生变化时触发 | 目前的选中值 |
# 插槽
插槽即el-select 的插槽 (opens new window)和el-tree 的插槽 (opens new window),其中 el-select 的插槽仅支持 prefix。
使用插槽需加上对应组件的前缀,例如,el-select 的 prefix 插槽为 select-prefix
,el-tree 的 default 插槽为 tree-default
上次更新: 2024/01/09, 10:57:01