el-tree标签实现每一级单选

在Element UI库中，`el-tree`组件通常用于展示树形结构的数据，如果想要实现在每一级都只能选择一个节点（即单选），可以结合`tree-strictly`属性来实现。

首先，设置`tree-node-key`为每个节点的唯一标识，这将作为选中状态的依据。例如：

<el-tree
  :data="treeData"
  :props="defaultProps"
  tree-node-key="id"
  @node-click="handleNodeClick"
>
</el-tree>

然后，在Vue组件中定义数据结构，并提供默认选中项：

export default {
  data() {
    return {
      treeData: [...], // 树状数据数组
      defaultProps: {
        children: 'children', // 指定节点的子元素属性名
        checkStrictly: true, // 设置严格检查模式，不允许同一层级多选
      },
      selectedKeys: [], // 存储已选择节点的key
    };
  },
  methods: {
    handleNodeClick(node) {
      if (this.checkStrictly) { // 如果设置了严格检查模式
        this.$refs.tree.setCheckedKeys([node.id]); // 设置当前节点为选中
        this.selectedKeys = [node.id]; // 更新已选节点列表
        this.$refs.tree.clearChecked(node.parent); // 清除其父节点及所有子节点的选择
      } else {
        // 非严格模式下，可以自行处理切换操作
      }
    },
  },
};

在这个例子中，当点击一个节点时，会清除其父节点及其所有子节点的选中状态，只保留当前节点。如果需要允许同一层级多选，只需去掉`check-strictly`属性即可。