介绍

一个简单灵活的vue.js树形组件，可作为插件使用，也可直接作为component使用
使用时只需传入一个树形数据绑定。
组件还提供了handle事件，你可以很方便的在组件上监听。
不止这些，
高效的计算方法
可定制的选择框样式
复选框显示可选
初始化展开层级
初始化勾选
可选的按钮图标
父节点半选状态支持
显示字段自定义
事件监听

...

安装

# install

npm install vue-simple-tree --save

数据规范

treeData

• id 必要属性，类型 Number


• label 必要属性，类型 String，可自定义，默认 label，如： options.label:'some_field'


• children 非必要，类型 Array


• treeData示例

./tree.json

{

  "data": [{

    "id": "1",

    "label": "Root",

    "children": [

      {

        "id": "2",

        "label": "Node2"

      },

      {

        "id": "3",

        "label": "Node3"

      },

      {

        "id": "4",

        "label": "Node4",

        "children": [

          {

            "id": "5",

            "label": "Node5"

          }

        ]

      }

    ]

  }]

}

使用示例

有两种使用方法:

1.局部注册

App.vue

<template>

  <div id="app">

    <vue-tree

      v-model="checkedIds"

      :tree-data="treeData"

      :options="options"

    />

  </div>

</template>

<script>

import VueTree from 'vue-simple-tree/src/components/VueTree.vue'

import Tree from './tree.json'

export default {

  name: 'app',

  components: { VueTree },

  data () {

    return {

      // 复选ids,可传入id数组作为初始选中状态,如[3,4,8]

      checkedIds: [],

      // tree数据

      treeData: Tree.data,

      // 设置项

      options: {}

    }

  }

}

</script>

2.通过插件形式全局注册

main.js

import App from './App'

import Vuetree from 'vue-simple-tree'

Vue.use(Vuetree)

new Vue({

  el: '#app',

  template: '<App/>',

  components: { App }

})

App.vue

<template>

  <div id="app">

    <vue-tree

      v-model="checkedIds"

      :tree-data="treeData"

      :options="options"

    />

  </div>

</template>

<script>

import Tree from './tree.json';

export default {

  name: 'app',

  data () {

    return {

      checkedIds: [],

      treeData: Tree.data,

      options: {}

    }

  }

}

</script>

设置选项
以下是默认设置.

你可以在options里覆盖默认设置，或仅设置若干项options: {someOption: optionValue}

你也可以绑定一个空的对象:options="{}"或直接忽略options

-- 注意：默认设置使用了 font-awesome 图标， 如果你继续使用默认设置，请确保这些图标能正常使用。

-- 你也可以使用如 iconfont 的图标库，使用方法见 帮助 中的font-class引用方法章节

如何获取选择框数据?
使用 v-model="ids" 获取选择框数据（ ids 是一个只包含 id 的数组）

默认情况下 ids 包含所有祖先节点，如果你想获取只包含叶子节点（所有目录被过滤掉），设置 options.idsWithParent 为 false

事件

该组件实现了单击节点名称事件 handle，当前操作节点作为参数传递

监听器

如需要，你可以选择监听 handle 事件

<vue-tree 

  v-model="ids"

  :tree-data="treeData"

  :options="options"

  @handle="someActions"

/>

为绑定的事件定义监听方法

methods: {

  someActions (item) {

    this.message.push(`节点 ${JSON.stringify(item)} 'handle' 事件`)

  }

}

HTML结构

组件渲染的html结构为嵌套的 ul, li 结构

如下：

<ul class="vue-tree-list">

  <li class="vue-tree-item">

    <div class="item-wrapper">

      <span class="item-toggle"></span>

      <span class="item-checkbox"></span>

      <span class="item-label"></span>

    </div>

    <ul class="vue-tree-list">

      <li class="vue-tree-item">

        <div class="item-wrapper">

          <span class="item-toggle"></span>

          <span class="item-checkbox"></span>

          <span class="item-label"></span>

        </div>

      </li>

      ...

    </ul>

  </li>

  <li class="vue-tree-item">

    <div class="item-wrapper">

      <span class="item-toggle"></span>

      <span class="item-checkbox"></span>

      <span class="item-label"></span>

    </div>

  </li>

  ...

</ul>

样式

如果你想修改默认样式，一切都为你准备好了，只需要重新定义以下css类

.vue-tree-list

.vue-tree-list .vue-tree-item

.vue-tree-list .item-wrapper

.vue-tree-list .item-wrapper .item-toggle

.vue-tree-list .item-wrapper .item-checkbox

.vue-tree-list .item-wrapper .item-label

情景样式

.item-checkbox .checked

.item-checkbox .unchecked

.item-checkbox .half-checked