Debug-018-elementUI-el-tree中通过CSS隐藏任意一项的选择框checkbox

前情提要：

        我们项目中使用的是elementUI，业务中经常需要使用到el-tree组件去实现一些有层级关系的功能。现在有一个需求描述一下：首先是这个el-tree是个有checkbox的树，每一子节点都可以被选择，用于去实现一些系统的权限方面的功能，现在有一个特殊要求是，隐藏掉某几个叶子节点的checkbox选择框，因为这几个是不需要传递id给后端的，如果显示checkbox，由于el-tree是父子级联的关系（业务中不允许做成父子不级联的，因为菜单很多，用户一个个去勾选叶子节点非常麻烦），所以，选了父级节点，子节点会全部被勾选，这个机制是不会变的。隐藏掉这几个特殊的叶子节点，就可以彻底规避掉父子级联导致的显示上被勾选的问题。

        以上是从业务上讲的，不理解的话也没事，因为我说的不是很具体。建议直接跳过

直接上功能：本文可以实现用CSS隐藏任意的el-tree的叶子节点

先准备一个el-tree,数据模拟一下。

接下来比如我想隐藏“Level two 2-2”的checkbox：

打开调试工具F12，定位到checkbox的位置

<style lang="scss">
div[data-key="6"] > .el-tree-node__content > .el-checkbox{
  // visibility: hidden;
  display: none;
}

</style>

这里利用的就是el-tree中的每一个叶子节点是必须有id的，在HTML结构中定位找到这个节点，那个需要被隐藏的节点中有一个属性：data-key="6"，这个是关键！然后再逐级往下找到那个“checkbox”去隐藏即可

注意：这里介绍的是elementui-plus中的，基于vue3写的样式，如果项目中用的是elementui + vue2那一套的话，样式会有差异，但是按照这个思路往下定位，也一定可以实现。

原文地址：https://blog.csdn.net/LM0916/article/details/140641298

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！