效果:

组件代码

/**

* 树形下拉选择组件,下拉框展示树形结构,提供选择某节点功能,方便其他模块调用

* @author wy

* @date 2024-01-03 * 调用示例:

*

* :height="400" // 下拉框中树形高度

* :width="200" // 下拉框中树形宽度

* :isFilter="true" //是否出现树结构搜索过滤

* size="small" // 输入框的尺寸: medium/small/mini

* :data="data" // 树结构的数据

* :defaultProps="defaultProps" // 树结构的props

* multiple // 多选

* :inputWidth='250' //输入框的长度 Number

* clearable // 可清空选择

* collapseTags // 多选时将选中值按文字的形式展示

* checkStrictly // 多选时,严格遵循父子不互相关联

* :nodeKey="nodeKey" // 绑定nodeKey,默认绑定'id'

* :checkedKeys="defaultCheckedKeys" // 传递默认选中的节点key组成的数组

* @popoverHide="popoverHide"> // 事件有两个参数:第一个是所有选中的节点ID,第二个是所有选中的节点数据

*

*/

参数方法说明

属性说明height下拉框中树形高度 height=“400”width下拉框中树形宽度 width =“400”isFilter是否出现树结构搜索过滤 默认为truesize输入框的尺寸: medium/small/minidata树结构的数据defaultProps树结构的props,树结构说明multiple是否多选inputWidth输入框的长度 Numberclearable是否可清空选择collapseTags多选时将选中值按文字的形式展示checkStrictly多选时,严格遵循父子不互相关联nodeKey绑定nodeKey,默认绑定’id’checkedKeys传递默认选中的节点key组成的数组@popoverHide=“popoverHide”事件有两个参数:第一个是所有选中的节点ID,第二个是所有选中的节点数据@change=“clearKey”当选项改变时触发

组件使用包含模拟数据

推荐链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: