封装一个树形结构组件

<!--
    author：金荣华
    description：树型组件进行封装
    date：2022-11-17
 -->
<template>
  <div class="tree-box">
    <el-tree
      :highlight-current="true"
      :data="data"
      accordion
      node-key="id"
      :default-expanded-keys="expandedKeys"
      ref="tree"
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ data }">
        <span>{{ data.name }}</span>
        <span>
          <!-- <i class="el-icon-arrow-down"></i> -->
          <!-- <i class="el-icon-arrow-up"></i> -->
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  props: {
    // 接收的树型数组
    data: {
      type: Array
    },
    // 展开的key值
    expandedKeys: {
      type: Array
    },
    // 传入的当前key值
    currentKey: {
      type: String
    }
  },
  watch: {
    // 监听当前选中的key
    currentKey(oldValue, newValue) {
      console.log(oldValue)
      console.log(newValue)
      if (newValue) {
        this.$refs.tree.setCurrentKey(newValue)
      }
    }
  },
  methods: {
    handleNodeClick(data, node, obj) {
      this.$emit('node-click', { data, node, obj })
    }
  }
}
</script>

<style lang="scss">
.tree-box {
  //  移入树型样式
  .el-tree-node__content:hover {
    background: #f2f8f4;
    color: #009a44;
    // border-left: 4px solid #009A44;
  }

  // 选中当前node的样式
  .el-tree-node.is-current > .el-tree-node__content {
    background: #f2f8f4 !important;
    color: #009a44 !important;
    border-left: 4px solid #009a44;
  }

  // 树型图标样式调整
  .el-tree-node__expand-icon {
    position: absolute !important;
    right: 2% !important;
  }
  // 文本
  .el-tree-node__label {
    padding-left: 15px !important;
  }

  // 树形结构样式
  .el-tree-node__content {
    padding-bottom: 6px !important;
    padding-top: 3px !important;
    border-bottom: 1px solid #f2f8f4 !important;
    text-indent: 10px;
  }

  // 顶级背景颜色
  .el-tree-node.is-expanded.is-focusable > .el-tree-node__content:first-child {
    background-color: #009a44;
    color: #ffffff;
    font-weight: 400;

    &:hover {
      background: #f2f8f4 !important;
      color: #009a44 !important;

      .el-tree-node__expand-icon {
        color: #606266 !important;
        vertical-align: middle;
      }
    }

    .el-tree-node__expand-icon {
      color: #ffffff !important;
      vertical-align: middle;
    }
  }
  // 子级样式判断
  .el-tree-node__children > .el-tree-node.is-expanded.is-focusable > .el-tree-node__content {
    background-color: #fff;
    color: #606266;

    .el-tree-node__expand-icon {
      color: #606266 !important;
      vertical-align: middle;
    }
  }
}
</style>

效果图：