56 lines
1.4 KiB
Markdown
56 lines
1.4 KiB
Markdown
# ## Tree 树型组件
|
||
> **组件名：winext-tree**
|
||
|
||
|
||
步骤条，用于显示树型结构数据
|
||
|
||
### 基本用法
|
||
|
||
在 ``template`` 中的使用
|
||
|
||
```html
|
||
<!-- 基本用法 -->
|
||
<winext-tree :data="[{label: '事件一',children:[{label:'事件一一'}]}, {label: '事件二'}]"></winext-tree>
|
||
|
||
```
|
||
|
||
|
||
## API
|
||
|
||
### Tree Props
|
||
|
||
|属性名 |类型 | 可选值 |默认值 |说明|
|
||
|:-: |:-: | :-: |:-: |:-:|
|
||
|data |Array | - |[] |数据源，格式为：[{label:'xxx',children:[{label:'xxx'}]},{label:'xxx'}]|
|
||
|dataKey |String | - |label |数据显示文字key|
|
||
|arrayKey |String | - |- |v-for循环key|
|
||
|childrenKey |String | - |children |子节点key|
|
||
|defaultOpen |Boolean | - |false |节点初始化是否打开|
|
||
|
||
|
||
### Tree Events
|
||
|
||
|事件名称 |说明 |返回值 |
|
||
|:-: |:-: |:-: |
|
||
|itemClick |点击节点时触发 |节点对应数据源 |
|
||
|
||
### Tree Slot
|
||
|
||
|名称 |说明 |子组件参数 |
|
||
|:-: |:-: |:-: |
|
||
|default |节点文字右侧显示内容 |e={item:{},path:[]};item：节点对应数据源 path：节点对应路径 |
|
||
|body |(待开发)文字slot | |
|
||
|
||
|
||
## 完整示例
|
||
|
||
```html
|
||
<!-- 基本用法 -->
|
||
<winext-tree :data="[{id:1,name: '事件一',children:[{id:11,name:'事件一一'}]}, {id:2,name: '事件二'}]"
|
||
dataKey="name"
|
||
arrayKey="id"
|
||
childrenKey="children">
|
||
<template v-slot="slotItem">{{slotItem.item.name}}</template>
|
||
</winext-tree>
|
||
|
||
``` |