开源一个vue2的tree组件

一直打算偷懒使用个现成的树组件，但是在github上找了一大圈没有找到真正满足应用开发的树组件，所以没办法只能自己写了一个，开源出来希望可以帮助到需要的人，同时如果大家觉得好用，我可以顺带骗骗★（**希望喜欢的朋友对我体力输出的肯定可以点下★ **），由于我也算刚接触vue，所以难免有所考虑不周的地方，希望大家在issue里面指正。组件重点是父子组件数据的共享和状态保持，我是利用了下vuex的思路，采用一个控制仓库完成。

github 地址 vue-tree

How to run demo

npm install
npm run dev

效果图

示例

<template>
  <div style="width:300px;">
    <tree ref ='tree' :treeData="treeData" :options="options" @node-click='handleNode'/>
  </div>
</template>
<script>
import Tree from '../components/tree/tree.vue'
export default {
  name: 'test',
  data () {
    return {
      options: {
        showCheckbox: true,
        search: {
          useInitial: true,
          useEnglish: false,
          customFilter: null
        }
      },
      treeData: [
        {
          id: 1,
          label: '一级节点',
          open: true,
          checked: false,
          parentId: null,
          visible: true,
          searched: false,
          children: [
            {
              id: 2,
              label: '二级节点-1',
              checked: false,
              parentId: 1,
              searched: false,
              visible: true
            },
            {
              label: '二级节点-2',
              open: true,
              checked: false,
              id: 3,
              parentId: 1,
              visible: true,
              searched: false,
              children: [
                {
                  id: 4,
                  parentId: 3,
                  label: '三级节点-1',
                  visible: true,
                  searched: false,
                  checked: false
                },
                {
                  id: 5,
                  label: '三级节点-2',
                  parentId: 3,
                  searched: false,
                  visible: true,
                  checked: false
                }
              ]
            },
            {
              label: '二级节点-3',
              open: true,
              checked: false,
              id: 6,
              parentId: 1,
              visible: true,
              searched: false,
              children: [
                {
                  id: 7,
                  parentId: 6,
                  label: '三级节点-4',
                  checked: false,
                  searched: false,
                  visible: true
                },
                {
                  id: 8,
                  label: '三级节点-5',
                  parentId: 6,
                  checked: false,
                  searched: false,
                  visible: true
                }
              ]
            }
          ]
        }
      ]
    }
  },
  components: {Tree}
}
</script>

属性

参数	说明	类型	可选值	默认值
options	配置项	Object	—	—
treeData	指定节点对象数组	Array[Object]	—	—

     options: {
        showCheckbox: true,  //是否支持多选
        search: {
          useInitial: true, //是否支持首字母搜索
          useEnglish: false, //是否是英文搜索
          customFilter: null // 自定义节点过滤函数
        }

    /* 节点元素 */
    {
      id: 1, //节点标志
      label: '一级节点', //节点名称
      open: true, // 是否打开节点
      checked: false, //是否被选中
      parentId: null, //父级节点Id
      visible: true, //是否可见
      searched: false, //是否是搜索值
      children: [] //子节点
    }

方法

方法名	说明	参数
getSelectedNodeIds	若节点可被选择则返回目前被选中的节点Id所组成的数组	被选中的节点Id所组成的数组
getSelectedNodes	若节点可被选择则返回目前被选中的节点组成的数组	被选中的节点所组成的数组

事件

事件名称	说明	回调参数
node-click	节点被点击时的回调	共1个参数，节点组件本身。