el-tree的实现叶子节点单选的示例代码

下面我将详细讲解“el-tree的实现叶子节点单选的示例代码”的完整攻略。

示例代码实现

el-tree 的实现叶子节点单选，需要在 el-tree 上绑定 @check-change 事件，并通过 check-strictly 属性来配置选择模式。代码示例如下：

<template>
  <el-tree
    :data="data"
    @check-change="handleCheckChange"
    :check-strictly="true">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, label: "一级 1", children: [{ id: 4, label: "二级 1-1" }] },
        { id: 2, label: "一级 2", children: [{ id: 5, label: "二级 2-1" }] },
        { id: 3, label: "一级 2", children: [{ id: 6, label: "二级 3-1" }] },
      ],
      currentCheckedId: null, // 记录当前选中的节点 id
    };
  },
  methods: {
    handleCheckChange(node) {
      if (node.checked && node.isLeaf) {
        if (this.currentCheckedId !== null) {
          const prev = this.$refs.tree.getNode(this.currentCheckedId);
          prev.setChecked(false, true);
        }
        this.currentCheckedId = node.id;
      } else {
        this.currentCheckedId = null;
      }
    },
  },
};
</script>

上述代码中，首先定义了一个树形结构数据 data，包含了三个一级节点和对应的子节点。el-tree 组件中，绑定了 @check-change 事件来监听 checkbox 的变化，通过 check-strictly 属性来设置只能选择叶子节点。

在 methods 中，定义了 handleCheckChange 方法，用于监听 checkbox 的变化。当选中叶子节点时，判断是否已经存在已选中的节点，如果存在则将其设置为未选中，同时记录当前选中的节点 id；如果不存在已选中的节点，则直接记录当前选中的节点 id。当取消选中时，将当前选中节点 id 置为 null。

这样，就实现了叶子节点单选的功能。

示例说明

示例1：只能选中叶子节点

在上文代码示例中，通过 check-strictly 属性来设置只能选择叶子节点。这样，在 el-tree 中，只有叶子节点才能被选中，非叶子节点的 checkbox 将无法被选中。例如，在示例数据 data 中，一级节点 "一级 1" 的 checkbox 将无法被选中。

示例2：只能选中一个叶子节点

在上述代码示例中，通过记录当前选中节点的 id 来实现只能选中一个叶子节点。通过判断节点是否为叶子节点以及是否被选中，来判断是否需要将上一个选中节点设置为未选中状态。这样，当选中一个叶子节点时，前一个选中的节点将自动取消选中。