单选el-tree组件,只可选最后一个层级

<template>

  <div>

    <el-tree

      :data="treeData"

      :props="defaultProps"

      node-key="id"

      :default-checked-keys="[selectedNodeId]"

      :default-expanded-keys="[expandedNodeId]"

      :highlight-current="true"

      :expand-on-click-node="true"

      :render-content="renderContent"

      @node-click="handleNodeClick"

      :check-on-click-node="true"

    ></el-tree>

  </div>

</template>

<script>

export default {

  data() {

    return {

      treeData: [

        {

          id: 1,

          label: '节点1',

          children: [

            {

              id: 2,

              label: '子节点1-1',

              children: [

                {

                  id: 3,

                  label: '子节点1-1-1'

                },

                {

                  id: 4,

                  label: '子节点1-1-2'

                }

              ]

            },

            {

              id: 5,

              label: '子节点1-2'

            }

          ]

        },

        {

          id: 6,

          label: '节点2'

        }

      ],

      selectedNodeId: '',

      expandedNodeId: '',

      parentMap: {} // 父节点映射关系

    };

  },

  computed: {

    defaultProps() {

      return {

        children: 'children',

        label: 'label'

      };

    }

  },

  created() {

    this.buildParentMap(this.treeData);

  },

  methods: {

    handleNodeClick(node) {

      if (!node.children || node.children.length === 0) {

        // 只选中最后一个层级节点

        this.selectedNodeId = node.id;

        // 获取当前选中子节点的所有父节点

        const parentNodes = this.getParentNodes(node);

        console.log(parentNodes); // 输出父节点数组

      } else {

        // 清空选中

        this.selectedNodeId = '';

      }

      // 展开点击的节点

      // this.expandedNodeId = node.id;

    },

    renderContent(h, { node, data }) {

      const isSelected = node.id === this.selectedNodeId;

      return h(

        'span',

        {

          class: {

            'tree-node': true,

            'tree-node-selected': isSelected

          },

          style: isSelected ? { color: 'white', background: 'blue', width: '100%' } : {}

        },

        data.label

      );

    },

    buildParentMap(nodes, parent = null) {

      for (const node of nodes) {

        this.parentMap[node.id] = parent;

        if (node.children && node.children.length > 0) {

          this.buildParentMap(node.children, node);

        }

      }

    },

    getParentNodes(node, parents = []) {

      if (!node || !this.parentMap[node.id]) {

        return parents;

      }

      const parent = this.parentMap[node.id];

      parents.unshift(parent);

      return this.getParentNodes(parent, parents);

    }

  }

};

</script>

<style scoped>

.tree-node-selected {

  color: white !important;

  background-color: blue !important;

}

</style>