VUE element el-tree 只叶子节点显示多选框

最新推荐文章于 2024-12-13 16:53:55 发布

原创最新推荐文章于 2024-12-13 16:53:55 发布 · 7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue #element #el-tree

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Element UI的el-tree组件中仅显示子节点的多选框，而隐藏中间节点的多选框。通过使用less样式语言进行CSS自定义，实现el-tree节点选择行为的精细化控制。

element 非常流行

一直没有搞过前端，无奈项目需要，自己搞！

用到el-tree

要打开多选框只需要在 el-tree 标签加 show-checkbox 很简单，所有节点都有了多选框。

那么我只需要子节点带多选框，中间节点没有多选框。

网上搜的结果非常一致：

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

然而总是没有那么顺利，这是一段CSS代码，需要在style 加上 lang="less" 才可以

<style lang="less">
    .el-tree-node {
        .is-leaf + .el-checkbox .el-checkbox__inner {
            display:inline-block;
        }
        .el-checkbox__input> .el-checkbox__inner {
            display:none;
        }
    }
</style>

如果加上lang="less"无法运行了，则是因为npm的依赖出了问题。

在package.json中确认 "less": "^3.11.1"