开源一个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	若节点可被选择则返回目前被选中的节点组成的数组	被选中的节点所组成的数组