【CSS】灵活展示el-tree复选框

这是项目中目录树的代码：

<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，复选框即可见！