vue，基於element的tree組件封裝

封裝組件代碼

// 組件：樹
/*
參數說明-屬性：
1.treeData：展示數據（array）
2.treeEmptyText:內容為空的時候展示的文本(String)
3.treeNodeKey：每個樹節點用來作為唯一標識的屬性，整棵樹應該是唯一的(String)
4.treeRenderAfterExpand:是否在第一次展開某個樹節點后才渲染其子節點(boolean)
5.treeHighlightCurrent:是否高亮當前選中節點，默認值是 false(boolean)
6.treeDefaultExpandAll:是否默認展開所有節點(boolean)
7.treeExpandOnClickNode:是否在點擊節點的時候展開或者收縮節點， 默認值為 true，如果為 false，則只有點箭頭圖標的時候才會展開或者收縮節點(boolean)
8.treeCheckOnClickNode:是否在點擊節點的時候選中節點，默認值為 false，即只有在點擊復選框時才會選中節點。(boolean)
9.treeDefaultExpandedKeys:默認展開的節點的 key 的數組(array)
10.treeShowCheckbox:節點是否可被選擇(boolean)
11.treeCheckStrictly:在顯示復選框的情況下，是否嚴格的遵循父子不互相關聯的做法，默認為 false(boolean)
12.treeDefaultCheckedKeys:默認勾選的節點的 key 的數組(array)
13.treeAccordion:是否每次只打開一個同級樹節點展開(boolean)
14.treeIndent:相鄰級節點間的水平縮進，單位為像素(number)
15.treeIconClass:自定義樹節點的圖標(string)
16.treeFilterText：對樹節點進行篩選操作(string)

17.treeNodeClickFunName:節點點擊回調函數的函數名（示例：@trNodeClick="treeNodeClick" treeNodeClickFunName="trNodeClick"）
  返回參數：s：有復選框時，選中節點的信息,
            a：點擊節點在data中對應的對象,
            b：節點對應的 Node
18.treeCheckChangeFunName:節點選中狀態發生變化時的回調函數的函數名（示例：@trCheckChange="treeCheckChange" treeCheckChangeFunName="trCheckChange"）
  返回參數：a：傳遞給 data 屬性的數組中該節點所對應的對象,
            b：節點本身是否被選中,
            c：節點的子樹中是否有被選中的節點
            說明：現在返回參數報錯（TypeError: Cannot read property 'toLowerCase' of undefined）不知道啥原因，暫時不返回
19.treeCheckFunName:當復選框被點擊的時候觸發回調函數的函數名（示例：@trCheck="treeCheck" treeCheckFunName="trCheck"）
  返回參數：a:傳遞給 data 屬性的數組中該節點所對應的對象
            b:樹目前的選中狀態對象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四個屬性

參數說明-事件：
1.node-click:節點被點擊時的回調(共三個參數，依次為：傳遞給 data 屬性的數組中該節點所對應的對象、節點對應的 Node、節點組件本身。)
2.check-change：節點選中狀態發生變化時的回調（共三個參數，依次為：傳遞給 data 屬性的數組中該節點所對應的對象、節點本身是否被選中、節點的子樹中是否有被選中的節點）
3.check：當復選框被點擊的時候觸發（共兩個參數，依次為：傳遞給 data 屬性的數組中該節點所對應的對象、樹目前的選中狀態對象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四個屬性）
*/
<template>
  <div>
    <el-tree :data="treeData" :empty-text="treeEmptyText" :node-key="treeNodeKey" :render-after-expand="treeRenderAfterExpand" :highlight-current="treeHighlightCurrent" :default-expand-all="treeDefaultExpandAll" :expand-on-click-node="treeExpandOnClickNode" :check-on-click-node="treeCheckOnClickNode" :default-expanded-keys="treeDefaultExpandedKeys" :show-checkbox="treeShowCheckbox" :check-strictly="treeCheckStrictly" :default-checked-keys="treeDefaultCheckedKeys" :accordion="treeAccordion" :indent="treeIndent" :icon-class="treeIconClass" :filter-node-method="filterNode" @node-click="nodeClick" @check-change="checkChange" @check="check" :props="defaultProps" ref="modelTree">
    </el-tree>
  </div>
</template>

<script>
export default {
  props: {
    treeData: {
      type: Array
    },
    treeEmptyText: {
      type: String,
      default: '暫無數據'
    },
    treeNodeKey: {
      type: String
    },
    treeRenderAfterExpand: {
      type: Boolean,
      default: true
    },
    treeHighlightCurrent: {
      type: Boolean,
      default: false
    },
    treeDefaultExpandAll: {
      type: Boolean,
      default: false
    },
    treeExpandOnClickNode: {
      type: Boolean,
      default: true
    },
    treeCheckOnClickNode: {
      type: Boolean,
      default: false
    },
    treeDefaultExpandedKeys: {
      type: Array
    },
    treeShowCheckbox: {
      type: Boolean,
      default: false
    },
    treeCheckStrictly: {
      type: Boolean,
      default: false
    },
    treeDefaultCheckedKeys: {
      type: Array
    },
    treeAccordion: {
      type: Boolean,
      default: false
    },
    treeIndent: {
      type: Number,
      default: 16
    },
    treeIconClass: {
      type: String
    },
    treeFilterText: {
      type: String
    },
    treeNodeClickFunName: {
      type: String
    },
    treeCheckChangeFunName: {
      type: String
    },
    treeCheckFunName: {
      type: String
    }
  },
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    nodeClick (a, b, c) {
      if (!this.treeNodeClickFunName || this.treeNodeClickFunName === '') return
      let s = this.$refs.modelTree.getCheckedNodes()
      this.$emit(this.treeNodeClickFunName, s, a, b)
    },
    checkChange (a, b, c) {
      if (!this.treeCheckChangeFunName || this.treeCheckChangeFunName === '') return
      this.$emit(this.treeCheckChangeFunName, a, b, c)
    },
    check (a, b) {
      if (!this.treeCheckFunName || this.treeCheckFunName === '') return
      this.$emit(this.treeCheckFunName, a, b)
    }
  },
  computed: {},

  mounted: function () {

  },

  watch: {
    treeFilterText (val) {
      this.$refs.modelTree.filter(val)
    }
  }
}
</script>

<style></style>

　　父組件調用方式：

 <componentsTree 
	:treeData="treeData" 
	:treeEmptyText="treeEmptyText" 
	:treeNodeKey="treeNodeKey" 
	:treeRenderAfterExpand="treeRenderAfterExpand" 
	:treeHighlightCurrent="treeHighlightCurrent" 
	:treeDefaultExpandAll="treeDefaultExpandAll" 
	:treeExpandOnClickNode="treeExpandOnClickNode" 
	:treeCheckOnClickNodes="treeCheckOnClickNodes" 
	:treeDefaultExpandedKeys="treeDefaultExpandedKeys" 
	:treeShowCheckbox="treeShowCheckbox" 
	:treeCheckStrictly="treeCheckStrictly" 
	:treeDefaultCheckedKeys="treeDefaultCheckedKeys" 
	:treeAccordion="treeAccordion" 
	:treeIndent="treeIndent" 
	:treeIconClass="treeIconClass" 
	:treeFilterText="filterText" 
	@trNodeClick="treeNodeClick" treeNodeClickFunName="trNodeClick" 
	@trCheckChange="treeCheckChange" treeCheckChangeFunName="trCheckChange" 
	@trCheck="treeCheck" treeCheckFunName="trCheck">
</componentsTree>

　　引入方式：

import componentsTree from '@/utils/Tree/Tree'

components: {
    componentsTree
  }

data () {
    return {
    treeData: [
        {
          id: 1,
          label: '名士豪庭',
          children: [
            {
              id: 4,
              label: '1號樓',
              children: [
                {
                  id: 9,
                  label: '名士豪庭-李四',
                  type: 'person'
                },
                {
                  id: 10,
                  label: '名士豪庭-王五',
                  type: 'person'
                }
              ]
            },
            {
              id: '1_4',
              label: '2號樓',
              children: [
                {
                  id: '1_4_9',
                  label: '名士豪庭-大胖胖',
                  type: 'person'
                },
                {
                  id: '1_4_10',
                  label: '名士豪庭-栗瀚昂',
                  type: 'person'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '金石晶城',
          children: [
            {
              id: 5,
              label: '3號樓',
              children: [
                {
                  id: '2_5_9',
                  label: '金石晶城-卞雨梅',
                  type: 'person'
                },
                {
                  id: '2_5_10',
                  label: '金石晶城-益振華',
                  type: 'person'
                }
              ]
            },
            {
              id: 6,
              label: '5號樓'
            }
          ]
        },
        {
          id: 3,
          label: '黃金國際',
          children: [
            {
              id: 7,
              label: '2號樓'
            },
            {
              id: 8,
              label: '5號樓',
              children: [
                {
                  id: '3_8_9',
                  label: '黃金國際-阮嘉志',
                  type: 'person'
                },
                {
                  id: '3_8_10',
                  label: '黃金國際-谷梁靜曼',
                  type: 'person'
                }
              ]
            }
          ]
        }
      ],
      treeEmptyText: '暫無數據1',
      treeNodeKey: 'id',
      treeRenderAfterExpand: true,
      treeHighlightCurrent: true,
      treeDefaultExpandAll: true,
      treeExpandOnClickNode: false,
      treeCheckOnClickNodes: false,
      treeDefaultExpandedKeys: [1, 3],
      treeShowCheckbox: true,
      treeCheckStrictly: false,
      treeDefaultCheckedKeys: [],
      treeAccordion: true,
      treeIndent: 9,
      treeIconClass: ''
    }
}

　　展示效果：