elementUI Tree 树形控件单选实现

在Element UI的Tree组件中实现单选功能，你可以使用show-checkbox属性来启用多选，然后通过监听check事件来手动控制只选中一个节点。以下是实现单选的核心代码示例：

<template>
  <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    ref="tree"
    :props="defaultProps"
    @check="handleCheck"
  >
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // ...你的树形数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentNodeKey: null
    };
  },
  methods: {
    handleCheck(node, isChecked, indeterminate) {
      if (isChecked) {
        // 如果当前节点被选中，则取消其他所有节点的选中状态
        this.currentNodeKey = node.id;
        this.$refs.tree.setCheckedKeys([this.currentNodeKey]);
      }
    }
  }
};
</script>

在这个例子中，handleCheck方法会在用户点击复选框时被调用。如果用户尝试选中一个节点，并且这个节点不是当前唯一被选中的节点，则取消其他所有节点的选中状态，实现单选的效果。