# mfy_test

> npm install tree-custom ## 使用 Tree 1 、简单渲染树结构页面 ```html ```

Latest version **1.0.0** (published 2020-04-16) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install mfy_test
pnpm add mfy_test
yarn add mfy_test
bun add mfy_test
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-04-16 |
| First published | 2019-08-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | mufeiyan |
| Maintainers | mufeiyan |

## Links

- npm: https://www.npmjs.com/package/mfy_test
- Repository: https://github.com/MuFeiyan/tree-custom
- Homepage: https://github.com/MuFeiyan/tree-custom#readme
- Issues: https://github.com/MuFeiyan/tree-custom/issues
- npm.io page: https://npm.io/package/mfy_test

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [user](https://npm.io/package/user.md) 0.0.0
- [core-js](https://npm.io/package/core-js.md) ^2.6.5

## Recent versions

- 1.0.0 (latest) — 2020-04-16
- 0.3.0 — 2020-04-16
- 0.2.9 — 2020-04-15
- 0.2.8 — 2020-04-15
- 0.2.7 — 2020-04-15
- 0.2.6 — 2020-04-15
- 0.2.5 — 2020-04-15
- 0.2.3 — 2020-04-09
- 0.2.2 — 2020-04-09
- 0.2.1 — 2020-04-09
- 0.1.11 — 2020-04-09
- 0.1.10 — 2020-04-09
- 0.1.9 — 2020-04-09
- 0.1.8 — 2020-04-08
- 0.1.7 — 2020-04-08
- … 7 more at https://npm.io/package/mfy_test/versions

## README

## 安装
npm install tree-custom
## 使用 Tree
1 、简单渲染树结构页面<br>
```html
<Tree :treeData="treeData"/>
```

2、设置属性<br>
 - `treeData`:树结构数据,类型：Array, 默认：[]
    example:
    ```js
      [
        {
          id: '0', // nodeId
          label: '子级' + id,
          children: [
           {
             id: '0_0', // nodeId
            label: '子级' + id,
            children: []
            }
         ]
        }
      ]
 - `showFoldIcon`:是否显示打开关闭箭头,类型：boolean, 默认：true
 - `showCheckBox`: 是否显示多选框,类型：boolean, 默认：true
 - `defaultCheckedKeys`：默认选中的nodeId,类型：Array, 默认：[]
 - `defaultExpendKeys`：默认打开的nodeId,类型：Array, 默认：[]
 - `defaultDisabledKeys`：不可以选择的nodeId,类型：Array, 默认：[]

3、Example
```html
<Tree
   ref="tree"
   :treeData="treeData"
   :defaultCheckedKeys="['0']"
   :defaultExpendKeys="['0']"
   :defaultDisabledKeys="['1']"
   :showCheckBox ="false"
   :showFoldIcon ="false"/>
```
  
4、自定义树节点内容
- 方法一
```html
<Tree :treeData="treeData">
  <span class="custom-tree-node" slot-scope="{ node }">
    <span class="tree-text">{{ node.label }}</span>
    <span class="tree-node-btn">
      <button @click="(event) => addNode(event, node)">
        Add
      </button>
      <button @click="(event) => delNode(event, node)">
        Del
      </button>
    </span>
  </span>
</Tree>
```

- 方法二
```html
<Tree :treeData="treeData"
    :renderContent="renderContent"/>
```
```js
renderContent(h, { node }) {
    return (
      <span class="custom-tree-node">
        <span class="tree-text" >{node.label}</span>
        <span class="tree-node-btn">
          <button on-click={ (event) => this.addNode(event, node) }>Add</button>
          <button on-click={ (event) => this.delNode(event, node) }>Del</button>
        </span>
      </span>);
}

---
_Source: https://npm.io/package/mfy_test · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._