在使用el-tree时,我们需要多选功能会在el-tree标签添加show-checkbox属性:

那么,有时会遇到这样的需求,父节点不让多选,只容许多选叶子结点。那么,这时我们改怎么做呢?

通过调试工具:

多选框就是.el-checkbox这个样式,那么我们只需把这个样式覆盖一下,把它隐藏掉:

/deep/ .el-tree-node{
      .is-leaf + .el-checkbox .el-checkbox__inner{
          display: inline-block;
      }
      .el-checkbox .el-checkbox__inner{
          display: none;
      }
  }

注意:/deep/ 是强穿透,也可以写成<<< ,只在当前组件文件起作用,不改变整个页面样式。

最后别忘了在el-tree组件加上 :check-strictly="true"  是否严格的遵循父子不互相关联的做法

Logo

前往低代码交流专区

更多推荐