您的位置:首页 > 文旅 > 美景 > Debug-018-elementUI-el-tree中通过CSS隐藏任意一项的选择框checkbox

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

2024/10/5 20:54:17 来源:https://blog.csdn.net/LM0916/article/details/140641298  浏览:    关键词: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那一套的话,样式会有差异,但是按照这个思路往下定位,也一定可以实现。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com