el-tree单选 vue3

一、多选框样式变为单选框

//单选框样式
:deep(.el-tree .el-checkbox .el-checkbox__inner) {
  border-radius: 50%; /* 使复选框圆形 */
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background: #ffffff !important;
  border: 4px solid #0482f9;
}
:deep(.el-checkbox__inner:after) {
  content: none;
}

二 使用 el-tree 实现计算每个非叶子节点的后代节点的个数并显示

 <span v-if="!node.isLeaf" style="margin-left: 6px"
                >({{ handleComputeNodesNumber(data) }})</span
              >


/**
 * 计算子节点个数句柄方法
 */
const handleComputeNodesNumber = (data) => {
  // 当前节点的数据
  const nodeData = data
  console.log(nodeData)

  // 计算这个节点的叶子节点总数
  let sum = 0
  sum = computeNodesNumberAssist(0, nodeData.children)
  console.log("sum =>", sum)
  return sum
}

/**
 * 计算子节点个数辅助方法
 */
const computeNodesNumberAssist = (sum, tree) => {
  for (let i in tree) {
    sum++

    if (tree[i].children) {
      sum += computeNodesNumberAssist(0, tree[i].children)
    }
  }

  return sum
}

参考：使用 el-tree 实现计算每个非叶子节点的后代节点的个数并显示_el-tree显示子节点数量-CSDN博客

一、element ui, el-tree, 自定义图标:

参考：element ui, el-tree, 自定义图标_el-tree 加图标-CSDN博客