# mobile_tree

**Repository Path**: zhuzhaofeng/mobile_tree

## Basic Information

- **Project Name**: mobile_tree
- **Description**: 移动端树形数据选择方案, 选择当前节点, 当前节点及子节点,当前节点层级
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2020-06-25
- **Last Updated**: 2023-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mobile_tree

#### 介绍
移动端树形数据选择方案, 选择当前节点, 当前节点及子节点,当前节点层级

### Example

[ :fa-search: 点击查看示例](https://zhuzhaofeng.gitee.io/mobile_tree/)

### props

| props          | 类型    | 默认值   | 说明             |
| -------------- | ------- | -------- | ---------------- |
| data           | Array   | []       | 渲染数据         |
| label          | String  | label    | 展示字段名称     |
| nodeKey        | String  | id       | 数据key(如: id)  |
| children       | String  | children | 子节点的字段名称 |
| returnChildren | Boolean | false    | 是否返回子节点   |
| returnLevels   | Boolean | false    | 是否返回层级     |

### 方法
| emit name          | 返回数据    |  说明             |
| -------------- | ------- | -------- |
| change           | (data, levels)   | 值改变事件         |

> 当`returnLevels`为`true`时第二个参数`levels`才有值

### 使用

1. 复制`MobileTree`到项目组件目录中 [MobileTree](https://gitee.com/zhuzhaofeng/mobile_tree/blob/master/src/MobileTree.vue)
2. `import MobileTree from "@/components/MobileTree";`
3. 注册组件`components: { MobileTree }`


#### 基本使用

```html
<MobileTree
  :data="treeData"
	label="title"
	@change="handleMobileTreeChange"
	></MobileTree>
```

#### 返回当前节点及子节点

```html
<MobileTree
	returnChildren
	:data="treeData"
	label="title"
	@change="handleMobileTreeChange"
	></MobileTree>
```

#### 返回自身及当前层级

```html
<MobileTree
	returnLevels
  :data="treeData"
  label="title"
  @change="handleMobileTreeChange2"
  ></MobileTree>
```