# wechat-tree

**Repository Path**: chengpeng12/wechat-tree

## Basic Information

- **Project Name**: wechat-tree
- **Description**: 微信小程序-树组件
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2021-10-13
- **Last Updated**: 2022-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 树组件

## README

# 微信小程序-树组件

## 效果

![](image/tree.png)

## 1.引用组件

```javascript
//所引入组件页面的json文件
"usingComponents": {
    "data-tree": "/components/data-tree/data-tree" //树组件的存放路径
  }
```

## 2.wxml页面

```html
<view style='padding: 0 30rpx;'>
  <data-tree id='tree' treeList='{{dataTree}}'></data-tree>
</view>
```

## 3.数据格式

```javascript
    dataTree: [
      {
        id: 1,
        name: '一级A',
        children: [
          {
            id: 23,
            pid: 1,
            name: '二级A-a',
            children: [
              {
                pid: 23,
                id: 98,
                name: '三级A-a-1'
              }
            ]
          },
          {
            id: 20,
            pid: 1,
            name: '二级A-b',
          }
        ]
      },
      {
        id: 2,
        name: '一级B',
        children: [
          {
            pid: 2,
            id: 21,
            name: '二级B-a',
          }
        ]
      }
    ],
```

## 4.获取选中数据

```javascript
//父组件中 执行方法
let checked = this.selectComponent('#tree').getSelected();
console.log(checked)
```