vue3 element-ui 树选择单选

1.取消父子结点关联

<el-tree check-strictly :data="data" show-checkbox node-key="id" :props="defaultProps" ref="trees" @check="handleNodeClick" ></el-tree>

2.修改选中结点

在ts代码中写：

  const trees = ref(); //树形结构
  
   //选择节点时触发的函数
    const handleNodeClick = (e: any, row: any) => {
      let selectionData = "";
      //用户操作为勾选时
      if (row.checkedKeys.length) {
        trees.value.setCheckedKeys([e.id]);
        selectionData = e.id;
        //取消勾选操作
      } else {
        trees.value.setCheckedKeys([]);
        selectionData = "";
      }
       console.log(selectionData);
     //selectionData 即选中的值
    };

注：

在树形组件中，每个节点需要有唯一node-key值，上图中使用id为唯一值。如果没有id，可将其更换为其他唯一值参数。