el-tree子节点带复选框

el-tree的子节点带有复选框的样式可以通过修改CSS样式来实现。根据提供的引用内容，你可以使用以下CSS代码来实现子节点带复选框的样式：

.el-tree-node {
  /* 叶子节点显示复选框，其他节点不显示复选框 */
  .is-leaf ~ .el-checkbox .el-checkbox__inner {
    display: flex;
  }
  .el-checkbox__input > .el-checkbox__inner {
    display: none;
  }
}

/* 非一级节点 */
.el-tree-node__children {
  /* 节点展开显示复选框 */
  .expanded ~ .el-checkbox .el-checkbox__inner {
    display: flex;
  }
  .el-checkbox__input > .el-checkbox__inner {
    display: none;
  }
}

这段代码可以使一级节点不显示复选框，其他子节点在收起状态下不显示复选框，展开状态下显示复选框，叶子节点显示复选框。

相关问题

vue el-tree 新增子节点复选框自动勾选

在 Vue 中使用 el-tree 新增子节点时，可以通过在新增节点时给它的父节点设置 "indeterminate" 状态来实现自动勾选。还可以在父节点的 "change" 事件中调用递归函数来更新父节点的状态。

el-tree只有最后一级节点有复选框

在Element UI库中的`el-tree`组件中，如果想要设置只有树的最后一级节点才有复选框，通常会在数据结构设计上做文章。默认情况下，`el-tree`的节点配置项`default-checked-keys`或`check-strictly`用于控制是否启用多级节点的选择。如果你只想让叶子节点（最底层的节点）有复选框，可以采取以下步骤：

1. **节点数据处理**：在你的节点数据源中添加一个属性，比如`isLeaf`或`level`，标记每个节点是否为叶节点。

{
  label: '节点名称',
  children: [
    { label: '子节点1', isLeaf: true },
    // 其他子节点...
  ],
  isLeaf: false, // 只对最后一个层级的节点添加这个属性
}

2. **模板自定义**：在`el-tree`的`node-key`选项中指定用于渲染节点的关键字，并在模板中判断是否显示复选框。例如：

<template slot-scope="scope">
  <el-checkbox v-if="!scope.$data.isLeaf" :disabled="scope.indeterminate">选择</el-checkbox>
  <!-- ...其他内容 -->
</template>

3. **事件监听**：如果你需要动态控制复选框的行为，可以在`el-tree`的`@node-click`或者其他合适的事件上检查当前点击的节点是否为叶节点。