# ztreev

> > ztree - vue2.x

Latest version **0.0.20** (published 2017-11-06) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.20 |
| Published | 2017-11-06 |
| First published | 2017-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | gaohuijue@gmail.com |
| Maintainers | gaohuijue |
| Keywords | vue, ztree |

## Links

- npm: https://www.npmjs.com/package/ztreev
- Repository: https://github.com/gaohuijue/vue-ztree
- Homepage: https://github.com/gaohuijue/vue-ztree#readme
- Issues: https://github.com/gaohuijue/vue-ztree/issues
- npm.io page: https://npm.io/package/ztreev

## Dependencies (1)

- [ztree](https://npm.io/package/ztree.md) ^3.5.24

## Recent versions

- 0.0.20 (latest) — 2017-11-06
- 0.0.19 — 2017-11-02
- 0.0.18 — 2017-11-02
- 0.0.17 — 2017-11-01
- 0.0.16 — 2017-11-01
- 0.0.15 — 2017-11-01
- 0.0.14 — 2017-11-01
- 0.0.13 — 2017-11-01
- 0.0.12 — 2017-11-01
- 0.0.11 — 2017-11-01
- 0.0.10 — 2017-11-01
- 0.0.9 — 2017-11-01
- 0.0.8 — 2017-11-01
- 0.0.7 — 2017-11-01
- 0.0.6 — 2017-11-01
- … 5 more at https://npm.io/package/ztreev/versions

## README

# ztreev(vue2.x组件)
环境是抄的这个哥们的[项目](https://github.com/Litor/ztree-vue)的，npm安装他的包不能用,因为他是1.0版本，自己搞支持vue2.x版本。
目前是一个纯粹的包裹一下，没有任何改动。

[![NPM](https://nodei.co/npm/ztreev.png)](https://nodei.co/npm/ztreev/)

### 例子
1. 我使用的是vue-cli初始化的项目
`vue init webpack PROJECT_NAME`

2. webpack.base.conf.js添加配置,否则找不到jQuery、$、_ 等变量。
    ```
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        _: 'lodash'
      })
    ]
    ```
3. vue代码
    ```vue
    //加载静态数据
    <template>
      <ztree
        :setting="{
          async:{
            url: './data.json'
          },
          data: {
            key: {
                name: 'label'
            }
          }
        }"
        :data="[
        {
          label: '父节点1 - 展开',
          open: true,
          children: [
            {
              label: '父节点11 - 折叠',
              children: [
                {
                  label: '叶子节点111'
                },
                {
                  label: '叶子节点112'
                },
                {
                  label: '叶子节点113'
                },
                {
                  label: '叶子节点114'
                }
              ]
            },
            {
              label: '父节点12 - 折叠',
              children: [
                {
                  label: '叶子节点121'
                },
                {
                  label: '叶子节点122'
                },
                {
                  label: '叶子节点123'
                },
                {
                  label: '叶子节点124'
                }
              ]
            },
            {
              label: '父节点13 - 没有子节点',
              isParent: true
            }
          ]
        }
      ]"
      >
      </ztree>
    </template>
    <style>
      @import "~ztree/css/metroStyle/metroStyle.css";
    </style>
    ```
    ```vue
    //异步加载数据
    <template>
      <ztree :setting="{
        data:{
          key:{
            name:'label'
          }
        },
        once:{
          url: './static/data/tree.json',
          type : 'GET',
          data :{param:123},
          dataFilter:function(data){
            return data
          }
        }
      }"></ztree>
    </template>
    
    <style>
      @import "~ztree/css/metroStyle/metroStyle.css";
    </style>

    ```
### Attributes
| 参数      | 说明          | 类型      | 默认值                           |  备注 |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| setting     | ztree origin setting | Object    |{async:{type:'get'}} | 参考 http://www.treejs.cn/v3/api.php<br/>加了一个once[Object]属性,一次加载所有树形数据，配置同$.ajax()的option<br/>但是其中的dataFilter方法是在ajax回调里执行的。   |
| data     | localdata | Array    | —                               | 静态数据[Array]    |

可以给组件绑定事件，目前只支持`vm.$on`这种方法给树添加事件钩子，与ztree一致。
回调的最后一个参数用于存储返回值，比如
```js
beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy, store){
  store.cancel = true //防止拖放完成
}
```

### API
|  方法  |  参数  |  说明  |
|-------|------|--------|
|action  |   actionName(方法名),args...(方法参数)   | 调用treeObj的方法，如comp.action('getNodeByTId','123')<br/>comp.action('getNodesByFilter',filter, isSingle, parentNode, invokeParam) |
|refresh |mergeSetting(需要覆盖的配置)|与原setting混合，完成修改setting的效果，并重新初始化ztree.<br/>使用场景：开始时tree没有checkbox，调用<br/>comp.refresh({check:{enable:true}})给tree增加checkbox

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