eep_page/src/views/personal_workbench/project/components/MenuTree.vue

<template>
  <div class="menu-list">
    <el-tree highlight-current :data="nodeList" :props="defaultProps" @node-click="handleNodeClick">
      <div slot-scope="{ node }" class="custom-tree-node">
        <div
          :class="[
            'tree-box-item',
            curSelectId == node.data.id ? 'tree-box-item-active' : '',
            node.data.children ? 'tree-box-item-father' : '',
          ]"
        >
          <span style="margin-right: 10px">{{ node.label }}</span>
        </div>
      </div>
    </el-tree>
  </div>
</template>

<script>
import { isTrue } from '@/utils/validate';

export default {
  name: 'MenuTree',
  props: {
    nodeList: {
      type: Array,
      required: true,
    },
    id: {
      type: String,
      default: '',
    },
    bookName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      isTrue,
      curSelectId: this.id || '',
      defaultProps: {
        children: 'children',
        label: 'label',
        nodeKey: 'id',
        isLeaf: (data, node) => {
          if (data.is_leaf === 'true') {
            // 实体门店 叶子结点 不展示icon
            return true;
          }
        },
      },
    };
  },
  watch: {
    nodeList: {
      handler(val) {},
      immediate: true,
    },
  },
  created() {},
  methods: {
    /**
     * 选择节点
     * @param {string} nodeId - 节点ID
     * @param {boolean} isLeaf - 是否是叶子节点
     */
    selectNode(nodeId, isLeaf) {
      // if (!isLeaf) return;
      if (this.curSelectId === nodeId) return;
      this.curSelectId = nodeId;
      this.$emit('selectNode', nodeId);
    },
    /**
     * 计算章节名称样式
     * @param {number} deep - 节点深度
     * @param {boolean} isLeaf - 是否是叶子节点
     * @returns {Object} - 样式对象
     */
    computedNameStyle(deep, isLeaf) {
      return {
        'padding-left': `${(deep - 1) * 16}px`,
        cursor: isLeaf ? 'pointer' : 'auto',
      };
    },
    handleNodeClick(data) {
      // if (data.isLeaf) {
      // this.nodeName = data.name;
      this.selectNode(data.id);
      this.curSelectId = data.id;
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-list {
  :deep .el-tree {
    background: transparent;

    .el-tree-node__expand-icon {
      font-size: 16px;
    }
  }

  .tree-box-item-active {
    color: #f90;
  }

  .custom-tree-node {
    display: block !important;
    width: 100%;
    height: 100%;
    color: #2c2c2c;
  }

  :deep .el-tree-node__content,
  :deep .custom-tree-node {
    height: auto;
  }

  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background: none;
  }

  .tree-box-item {
    align-items: center;
    overflow: hidden;
    font-weight: 400;
    line-height: 38px;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;

    &-father {
      font-weight: bold;
    }
  }
}
</style>

<style lang="scss"></style>