0.1.7 • Published 2 years ago
TreeSelect 多级树选择
TreeSelect多级树选择主要用来解决海量数据下的渲染性能问题，目前已经支持以下特性：
安装
npm install @mijs/vue-tree-select
使用
属性配置
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| data | 数据源，注意data需要处理为树形结构再传递给组件使用 | Array | -- | [] |
| loading | 是否显示loading遮罩层 | Boolean | -- | false |
| height | 当前组件高度 | Boolean | -- | false |
| itemHeight | 节点的高度 | Number | -- | 24 |
| idKey | 节点唯一key | String | -- | id |
| labelKey | 节点显示文本key | String | -- | label |
| childrenKey | 子级节点key | String | -- | children |
| defaultExpandLevel | 默认展开层级 | Number | -- | -- |
| defaultExpandKeys | 默认展开的节点key集合 | Array | -- | -- |
| filterMethod | 过滤方法，接受{node: Object, keyword: String}参数 | Function | -- | -- |
| current | 当前选中的key | String | -- | -- |
方法
| 名称 | 说明 | 参数 | 返回值 |
|---|
| insertNode | 向指定节点末尾插入节点 | data: 插入的节点数据，parentNode: 父及节点 | -- |
| removeNode | 移除节点 | nodeId：节点或节点id | -- |
| filter | 过滤数据 | keyword：过滤的关键词 | -- |
事件
| 名称 | 说明 | 参数 |
|---|
| current | 当前行改变触发时间 | { node: Object } |
插槽
| 名称 | 说明 | 作用域 |
|---|
| default | 节点内容区域插槽，可覆盖节点文本 | { node: Object } |
| addon | 节点右侧工具扩展区域插槽 | { node: Object } |
node节点对象
| 名称 | 说明 |
|---|
| id | | 节点唯一标识 |
| level | 节点层级 |
| expanded | 是否展开 |
| parent | 父级节点 |
| data | 节点的元素数据 |
注意事项
- 本组件主要解决海量数据下的性能问题，所以使用时必须指定固定的高度
- 目前组件提供的功能并不是很多，可以通过fock仓库进行扩展