ElementUI Tree结构如何实现单选以及实现原理

ElementUI的Tree组件支持单选模式，你可以通过设置show-checkbox属性为false来启用单选功能。此外，你还可以通过node-key属性来指定每个树节点的唯一标识。

以下是一个简单的例子，展示如何在ElementUI的Tree组件中实现单选：

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    :node-key="nodeKey"
    ref="tree"
    show-checkbox="false"
    @check-change="handleCheckChange"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // 树形结构的数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      nodeKey: 'id',
      currentNodeKey: null
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.currentNodeKey = data[this.nodeKey];
        this.$refs.tree.setCheckedNodes([data]);
      }
    }
  }
};
</script>

在这个例子中，我们设置了show-checkbox为false来禁用复选框，并且监听了check-change事件。每次节点被选中时，handleCheckChange方法会被调用，并通过this.$refs.tree.setCheckedNodes方法设置当前节点为选中状态，取消其他已选中节点的选中状态。这样就实现了单选功能。