封装elementUI-树组件

本文只给出子组件的源代码，可以来我的主页看我封装的其他组件。
封装树组件，父子级不关联，并为树组件添加右键功能。

<template>
<div>
  <el-tree 
    :data="data" 
    :props='props'
    :highlight-current='highlight_current'
    :expand-on-click-node="expand_on_click_node"
    :default-expanded-keys='default_expanded_keys'
    :filter-node-method="filterNodeMethod"
    :node-key="node_key"
    @node-click="nodeClick"
    :ref="tree_ref"
    :show-checkbox='show_checkbox'
    :check-strictly='check_strictly'
    :default-expand-all='default_expand_all'
    :default-checked-keys='default_checked_keys'
    @check='check'
    @node-contextmenu="nodeContextmenu"
  ></el-tree>
  <div class='rightMenu' @mouseleave="rightNav=false" ref="rightNav" v-show="rightNav">
    <div @click="checkAll">勾选全部</div>
    <div @click="checkAllCancel">取消全部</div>
    <div @click="checkSelfOrChild">勾选本级及下级</div>
    <div @click="checkSelfOrChildCancel">取消本级及下级</div>
  </div>
</div>
</template>

<script>
  export default {
    name: 'tree',
    data () {
      return {
        rightNav:false,//控制右键菜单显示与隐藏
      }
    },
    props:{
      data:{//展示数据，必传，数组格式。
        type:Array,
        require:true,
        default(){
          return []
        }
      },
      props:{//配置选项，必传，对象格式。
        type:Object,
        require:true,
        default(){
          return {
          label: '',
          value: '',
          children: '',
          disabledRightMenu: false,//控制右键菜单是否启用，默认启用
          }
        }
      },
      tree_ref:{//相当于整颗树的ID，字符串类型，非必传。
        type:String,
        require:false,
        default:'tree'
      },
      expand_on_click_node:{//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
        type:Boolean,
        require:false,
        default:true
      },
      highlight_current:{//是否高亮当前选中节点，默认值是 true。
        type:Boolean,
        require:false,
        default:true
      },
      default_expanded_keys:{//默认展开的节点的 key 的数组，数组格式。
        type:Array,
        require:false,
        default(){
          return []
        }
      },
      default_checked_keys:{//默认勾选的节点的 key 的数组，数组格式。
        type:Array,
        require:false,
        default(){
          return []
        }
      },
      node_key:{//每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。
        type:String,
        require:false,
        default:null
      },
      show_checkbox:{//节点是否可被选择，即是否显示多选框，默认不显示多选框。
        type:Boolean,
        require:false,
        default:false
      },
      check_strictly:{//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。
        type:Boolean,
        require:false,
        default:false
      },
      default_expand_all:{//是否默认展开所有节点，默认为 false。
        type:Boolean,
        require:false,
        default:false
      },
      
    },
    methods:{

      /* 节点被点击时触发 */
      nodeClick(val) {
        console.log('nodeClick',val)
        //触发父组件事件
        this.$emit('node-click',val);//父组件事件名@node-click
      },

      /* 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏。 */
      filterNodeMethod(value, data, node){
        if (!value) return true;
        return data[this.props.label].includes(value);
      },

      /* 把树的ref传给父组件 */
      getTreeRef(){
        console.log('getTreeRef',this.tree_ref,this.$refs[this.tree_ref])
        //在勾选树的多选框时有用，在父组件中利用子组件的ref获取勾选后的node-key数组。
        this.$emit('get-tree-ref',this.$refs[this.tree_ref])//父组件事件名:get-tree-ref
      },

      /* 当复选框被点击的时候触发 */
      check(node,obj){
        // 共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
        console.log('check',node,obj)
        this.$emit('check',node,obj)//父组件事件名:check
      },

      /* 当单击鼠标右键时触发 */
      nodeContextmenu(event,obj,node,self){
        //如果没有多选框 或 禁用右键菜单
        if(!this.show_checkbox||this.props.disabledRightMenu){
          return;//右键不显示菜单。
        }
        //共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
        this.$emit('node-contextmenu',event,obj,node,self)//右键时触发父组件事件@right-menu-data，获取值
        this.nodeContextmenuObj = obj;
        var ev = ev || event;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        this.rightNav = true;
        this.$refs.rightNav.style.left = ev.clientX + "px";
        //当滑动滚动条时也能准确获取菜单位置
        this.$refs.rightNav.style.top = ev.clientY + scrollTop + "px";
      },
      //右键勾选递归
      getTreeCheck(dataAll,data,childrenName,code){
        if(data && data.length > 0){
          for(let i=0; i<data.length; i++){
            if(this.checkedKeys.indexOf(data[i][code]) === -1){
              this.checkedKeys.push(data[i][code]);
            }
            if(data[i][childrenName] && data[i][childrenName].length > 0){
              this.getTreeCheck(dataAll,data[i][childrenName],childrenName,code);
            }
            this.$refs[this.tree_ref].setCheckedKeys(this.checkedKeys);
          }
        }
      },
      //右键取消勾选递归
      getTreeCheckCancel(dataAll,data,childrenName,code){
        if(data && data.length > 0){
          for(let i=0; i<data.length; i++){
            if(this.checkedKeys.indexOf(data[i][code]) > -1){
              this.checkedKeys.splice(this.checkedKeys.indexOf(data[i][code]),1);
            }
            if(data[i][childrenName] && data[i][childrenName].length > 0){
              this.getTreeCheckCancel(dataAll,data[i][childrenName],childrenName,code);
            }
            this.$refs[this.tree_ref].setCheckedKeys(this.checkedKeys);
          }
        }
      },
      //勾选所有
      checkAll(){
        //判断是数组类型
        this.checkedKeys = [];
        this.getTreeCheck(this.data,this.data,this.props.children,this.node_key);
        //把勾选树的node-key返给父组件
        this.$emit('get-check-data',this.$refs[this.tree_ref].getCheckedKeys(),this.tree_ref)//触发父组件事件@get-check-data 
        this.rightNav = false;
        window.event.stopPropagation();
      },
      //勾选本级及下集
      checkSelfOrChild(){
        this.checkedKeys = this.$refs[this.tree_ref].getCheckedKeys();
        if(this.checkedKeys.indexOf(this.nodeContextmenuObj[this.node_key]) === -1){
          this.checkedKeys.push(this.nodeContextmenuObj[this.node_key]);
        }
        this.getTreeCheck(this.data,this.nodeContextmenuObj[this.props.children],this.props.children,this.node_key);
        this.$emit('get-check-data',this.$refs[this.tree_ref].getCheckedKeys(),this.tree_ref)//触发父组件事件@get-check-data 
        this.rightNav = false;
        window.event.stopPropagation();
      },
      //取消勾选所有
      checkAllCancel(){
        this.checkedKeys = [];
        this.$refs[this.tree_ref].setCheckedKeys(this.checkedKeys);
        //把勾选树的node-key返给父组件--未勾选所以是空数组
        this.$emit('get-check-data',this.$refs[this.tree_ref].getCheckedKeys(),this.tree_ref)//触发父组件事件@get-check-data
        this.rightNav = false;
        window.event.stopPropagation();
      },
      //取消勾选本级及下级
      checkSelfOrChildCancel(){
        this.checkedKeys = this.$refs[this.tree_ref].getCheckedKeys();
        if(this.checkedKeys.indexOf(this.nodeContextmenuObj[this.node_key]) > -1){
          this.checkedKeys.splice(this.checkedKeys.indexOf(this.nodeContextmenuObj[this.node_key]),1);
        }
        this.getTreeCheckCancel(this.data,this.nodeContextmenuObj[this.props.children],this.props.children,this.node_key);
        this.$emit('get-check-data',this.$refs[this.tree_ref].getCheckedKeys(),this.tree_ref)//触发父组件事件@get-check-data 
        this.rightNav = false;
        window.event.stopPropagation();
      },
    },
    created(){
    },
    mounted(){
      this.getTreeRef()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  /*右键菜单*/  
  .rightMenu {
    position: fixed;
    left:0;
    top: 0;
    background: #fff;
    border: 1px solid #a9a9a9;
    z-index: 9999;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    color: #2c3e50!important;
  }
  .rightMenu div {
    cursor: pointer;
    height:24px;
    line-height: 24px;
    padding: 0 80px 0 20px;
  }
  .rightMenu div:hover {
    background: #eee!important;
    color: #2c3e50!important;
  }
</style>

效果：