Vueztree详解

一、简介

Vueztree是一个基于Vue.js的树形组件库，它可以快速的为我们创建 tree 控件。控件在DOM中的数据结构是树形结构。它支持自定义节点内容、渲染、数据绑定、异步加载以及其他高级功能。

二、安装方法

Vueztree可以使用 yarn 和 npm 进行安装。

使用 npm:

npm install vueztree -save

使用 yarn:

yarn add vueztree

三、基础用法

以下是渲染一个简单的静态树的代码示例:

<template>
  <div>
    <ztree :data="treeData" />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      treeData: [
        {
          name: '父节点 1',
          children: [
            { name: '子节点 1' },
            { name: '子节点 2' }
          ]
        },
        { name: '父节点 2' }
      ]
    }
  }
}
</script>

以上代码渲染出的效果如下：

四、图标设置

节点可以自定义设置图标，以下是设置图标的代码示例：

<template>
  <div>
    <ztree
      :data="treeData"
      :setting="{
        view: {
          fontCss: { color: 'red' },
          addDiyDom: function (treeId, node) {
            if (node.level === 2) {
              var aObj = node.aObj;
              var editStr =
                '<span class="button edit" id="' +
                node.tId +
                '_edit" title="edit"></span>';
              aObj.after(editStr);
              var btn = $(node, treeId).find('span.edit');
              if (btn)
                btn.bind('click', function () {
                  alert('edit button click for ' + node.name);
                });
            }
          }
        },
        edit: {
          enable: true
        }
      }"
    />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      treeData: [
        {
          name: '父节点 1',
          icon: '/img/1.png',
          children: [
            { name: '子节点 1', icon: '/img/2.png' },
            { name: '子节点 2', icon: '/img/3.png' },
            { name: '子节点 3', icon: '/img/4.png' }
          ]
        },
        { name: '父节点 2', icon: '/img/5.png' }
      ]
    }
  }
}
</script>

以上代码渲染出的效果如下：

五、异步加载

Vueztree 支持异步加载节点数据，以下是使用异步加载的代码示例：

<template>
  <div>
    <ztree
      :data="treeData"
      :async="{
        enable: true,
        url: '/getNodes',
        autoParam: ['id'],
        dataFilter: function (treeId, parentNode, responseData) {
          return responseData.nodes;
        }
      }"
    />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      treeData: [
        {
          name: '父节点 1',
          id: 1,
          isParent: true
        },
        {
          name: '父节点 2',
          id: 2,
          isParent: true
        }
      ]
    }
  }
}
</script>

以上代码渲染出的效果如下：

六、过滤器

通过 Vueztree 内置的两个过滤器，用户可以轻松的过滤树上的节点，以下是使用过滤器的代码示例：

<template>
  <div>
    <input v-model="keyword" placeholder="输入关键词进行过滤" />
    <ztree
      :data="treeData"
      :filter="{
        type: 'fun',
        filter:function (node) {
          return node.name.indexOf(keyword) !== -1;
        }
      }"
    />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      keyword: '',
      treeData: [
        {
          name: '父节点 1',
          children: [
            { name: '子节点 1' },
            { name: '子节点 2' }
          ]
        },
        { name: '父节点 2' }
      ]
    }
  }
}
</script>

以上代码渲染出的效果如下：

七、复选框

Vueztree 内置了复选框，以下是使用复选框的代码示例：

<template>
  <div>
    <ztree
      :data="treeData"
      :checkable="true"
      @on-check-change="onCheckChange"
    />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      treeData: [
        {
          name: '父节点 1',
          id: 1,
          children: [
            { name: '子节点 1', id: 2 },
            { name: '子节点 2', id: 3 }
          ]
        },
        { name: '父节点 2', id: 4 }
      ]
    }
  },
  methods: {
    onCheckChange (checkedNodes) {
      console.log(checkedNodes.map((node) => node.name));
    }
  }
}
</script>

以上代码渲染出的效果如下：

八、拖动

Vueztree 还支持节点拖动，可以实现节点拖动到同一父节点下或不同父节点下，以下是使用拖动的代码示例：

<template>
  <div>
    <ztree
      :data="treeData"
      :droppable="true"
      @on-drag-move="onDragMove"
      @on-drop="onDrop"
      :setting="{
        edit: {
          drag: {
            inner: true,
            isCopy: true
          },
          enable: true
        }
      }"
    />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      treeData: [
        {
          name: '父节点 1',
          id: 1,
          children: [
            { name: '子节点 1', id: 2 },
            { name: '子节点 2', id: 3 }
          ]
        },
        { name: '父节点 2', id: 4 }
      ]
    };
  },
  methods: {
    onDragMove ({ event, treeId, treeNodes }) {
      console.log('drag move event', event);
      console.log('drag move treeId', treeId);
      console.log('drag move nodes', treeNodes);
    },
    onDrop ({ event, treeId, targetNode, moveType, treeNodes }) {
      console.log('drop event', event);
      console.log('drop treeId', treeId);
      console.log('drop nodes', treeNodes);
      console.log('drop target node', targetNode);
      console.log('drop moveType', moveType);
      console.log('new parent', targetNode.getParentNode());
    }
  }
}
</script>

以上代码渲染出的效果如下：