这是项目中目录树的代码:
<el-tree
:node-key="id"
ref="deptTree"
highlight-current
lazy
:load="deptLoad"
:data="deptActors"
:show-checkbox="isMultiple"
:default-expanded-keys="expandedKeys"
:default-checked-keys="checkedKeys"
:expand-on-click-node="false"
:render-content="treeRenderFunc"
:filter-node-method="treeFilterFunc"
:props="defaultProps"
@node-expand="_tree_node_expand"
@node-click="_tree_node_click"
@check="_tree_check_select">
</el-tree>
对于根目录来说,如果勾选复选框的话数据量太大,可能会造成卡顿,因此对于根目录来说,不给予展示复选框,最直接的做法就是对于所有的根目录都不展示复选框,使用 css 样式可以做到,代码如下:
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/select-tree.scss";
::v-deep .el-tree > .el-tree-node > .el-tree-node__content .el-checkbox {
display: none
}
</style>
这段 css 代码的含义如下:
::v-deep
:伪元素,它是用于处理深度作用选择器的一种方式,通常用于在父组件中修改子组件的样式。在Vue.js中,当使用了scoped样式时,样式只在当前组件中生效,而使用 ::v-deep 可以穿透这个作用域,影响到子组件。
.el-tree
:选择器,表示样式作用于具有 el-tree 类的元素。
> .el-tree-node
: 选择器,表示样式作用于 el-tree 子元素中的具有 el-tree-node 类的直接子元素。
> .el-tree-node-content
:选择器,表示样式作用于 el-tree-node 子元素中的具有 el-tree-node__content 类的直接子元素。
> .el-checkbox
:选择器,表示样式作用于 el-tree-node__content 子元素中的具有 el-checkbox 类的直接子元素。
所以,这段代码的意思是,当应用于带有 el-tree 类的元素时,找到直接子元素为 el-tree-node,其子元素为 el-tree-node__content,再找到直接子元素为 el-checkbox,将其 display 属性设置为 none,即不显示。
总体来说,这段代码的目的是确保 el-checkbox 被隐藏。
但是这样有一个坏处,每个人在系统的权限是不一样的,他能够看见的组织层级也不同,如果这个人所在组织下属较少,那么全选复选框对他来说就是经常需要操作的功能,此时应该开发根目录的复选框,解决思路如下:
在 el-tree 组件中利用 class 动态渲染 css 样式,但由于前面的 css 代码直接更改了 el-tree 封装的样式,因此根据条件去判断是否展示 el-tree 的样式是行不通的,我的思路是去更改 display 的值,满足条件则将 none 修改为 block,否则为 none。
vue 代码如下:
<el-tree style=""
node-key="id"
ref="deptTree"
highlight-current
lazy
:class="{'hide-checkbox' : /[a-zA-Z]/.test(rootOrgId)}"
:load="deptLoad"
:data="deptActors"
:show-checkbox="isMultiple"
:default-expanded-keys="expandedKeys"
:default-checked-keys="checkedKeys"
:expand-on-click-node="false"
:render-content="treeRenderFunc"
:filter-node-method="treeFilterFunc"
:props="defaultProps"
@node-expand="_tree_node_expand"
@node-click="_tree_node_click"
@check="_tree_check_select">
</el-tree>
ps:/[a-zA-Z]/.test(rootOrgId)
:利用正则表达式判断 rootOrgId 是否包含英文字母,如果包含返回 true,否则 false
css 代码如下:
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/select-tree.scss";
::v-deep .el-tree > .el-tree-node > .el-tree-node__content .el-checkbox {
display: var(--checkbox-display, none); /* 使用 CSS 变量, 默认值为none */
}
.hide-checkbox {
--checkbox-display: block; /* 设置 CSS 变量的值为block */
}
</style>
这里,我去判断 this.rootOrgId 是否包含字母,因为在我的需求中,组织层级比较高的 orgId 是不包含字母的。如果不包含字母,那么 /[a-zA-Z]/.test(rootOrgId)
为 false,hide-checkbox 样式不会被执行,此时 display 为默认值 none,如果包含字母,那么 hide-checkbox 被执行,display 值为 block,复选框即可见!