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: ''
    }
}

　　展示效果：