Element plus el-tree 实现选择框单选、根节点不可选的功能代码

在Element Plus中，要实现el-tree组件的单选功能并且设置根节点不可选，你可以使用show-checkbox属性来启用复选框，并结合:check-strictly属性来确保单选，同时监听节点选中事件来控制根节点的选中行为。

以下是实现这些功能的示例代码：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    ref="tree"
    show-checkbox
    :check-strictly="true"
    @check-change="handleCheckChange"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        // 树形结构的数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      // 防止根节点被选中
      if (data.id === 'rootId') { // 'id' 是你数据中用来标识根节点的属性
        this.$refs.tree.setChecked(data.id, false);
      }
    }
  }
};
</script>

在这个例子中，:check-strictly="true"确保了只有叶子节点可以被选中，而不是父子节点同时被选中。handleCheckChange方法会在节点的选中状态发生变化时被调用，我们在这个方法里面检查如果试图选中根节点，则取消选中。