Vue组件(一) - 二次封装ElementUI实现tree树形组件

功能描述

基础功能同el-tree

代码

base-tree.vue:

<!--
 * @Description: 公共树组件
 * @Author: HMM
 * @Date: 2021-01-11 16:23:23
 * @FilePath: base-tree.vue
变量：
 expandNode：是否展开所有节点
 isShowFilter: 是否需要节点过滤
 treeProps: 树形结构配置项
事件：
 @handleNodeClick: 节点被点击时的回调
 @handleCheck：当复选框被点击的时候触发
 @handleCheckChange：节点选中状态发生变化时的回调
方法：同element-ui
getCurrentKey
getCurrentNode
setCurrentKey
getCheckedKeys
getCheckedNodes

-->
<template>
  <div class="baseTree">
    <el-input v-if="isShowFilter" size="small" :placeholder="placeholder" v-model="filterText">
    </el-input>
    <el-tree ref="baseTree"
    :data="treeList"
    :node-key="treeProps.id"
    :props="treeProps"
    :highlight-current="highlight"
    :accordion="accordion"
    :default-expand-all="expand"
    :default-expanded-keys="expandedKeys"
    :auto-expand-parent="expandParent"
    :expand-on-click-node="expandNode"
    :show-checkbox="multiple"
    :check-strictly="checkStrictly"
    :filter-node-method="filterNode"
    @node-click="handleNodeClick"
    @node-expand="handleNodeExpand"
    @node-collapse="handleNodeCollapse"
    @check="handleCheck"
    @check-change="handleCheckChange"
    @node-contextmenu="handleNodeContextMenu">
    </el-tree>
  </div>
</template>

<script>
export default {
     
  props: {
     
    // treeList: {
     
    //   type: Array,
    //   default () {
     
    //     return [];
    //   }
    // },
    // 默认树形结构配置项
    treeProps: {
     
      type: Object,
      default() {
     
        return {
     
          id: 'id', // Number类型：树组件ID(node-key)
          label: 'label', // String类型 : 树组件显示名称
          pid: 'parentId', // Number类型：父级ID
          children: 'children' // String类型：子节点
        };
      }
    },
    // 自动收起
    accordion:{
     
      type:Boolean,
      default:() => {
      return false }
    },
    // 是否展开所有节点，默认展开
    expand: {
     
      type: Boolean,
      default() {
     
        return true;
      }
    },
    // 展开子节点的时候是否自动展开父节点 默认值为 true
    expandParent:{
     
      type: Boolean,
      default() {
     
        return true;
      }
    },
    // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
    expandNode: {
     
      type: Boolean,
      default() {
     
        return true;
      }
    },
    // 默认展开的节点的 key 的数组
    expandedKeys:{
     
      type: Array,
      default() {
     
        return [];
      }
    },
    // 是否高亮当前选中节点，默认值是 true
    highlight: {
     
      type: Boolean,
      default() {
     
        return true;
      }
    },
    // 是否可多选，默认单选
    multiple: {
     
      type: Boolean,
      default() {
     
        return false;
      }
    },
    // 显示复选框情况下，是否严格遵循父子不互相关联
    checkStrictly: {
     
      type: Boolean,
      default() {
     
        return false;
      }
    },
    // 图标url
    iconUrl: {
     
      type: String,
      default() {
     
        return '';
      }
    },
    placeholder: {
     
      type: String,
      default: (