開源一個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個參數，節點組件本身。