为啥你的tree的checkbox隐藏的这么艰难

场景：

近期在实现一个基于element-ui 的 Tree 组件的场景， 产品要求， 部门的数据，都不要checkbox, 只有节点值为 员工 才显示，而且还要部分员工的checkbox 禁用

element-ui 的 tree 还不支持特定节点的checkbox隐藏功能， 网上大多采用 class 的方式，将第一层的checkbox进行了隐藏， 但是不满足我们的要求

规则：

• 
  
• 第一层节点不显示checkbox
  
• 后续任意子节点，如果数据为部门 则也不显示 checkbox
  
• 后端返回的部分数据，如果人员符合特定规则（根据自己场景来即可），则表现为 禁用 checkbox
  

实现

数据
treeData.js

export default [

    {
"id":1,
"label":"一级 1-是部门",
"depType":1,
"disabled":false,
"children":[

            {
"id":4,
"label":"二级 1-1-是部门",
"depType":1,
"disabled":false,
"children":[

                    {
"id":9,
"label":"三级 1-1-9",
"disabled":false

                    },

                    {
"id":25,
"label":"三级 1-1-25",
"disabled":false

                    },

                    {
"id":27,
"label":"三级 1-1-27",
"disabled":false

                    },

                    {
"id":30,
"label":"三级 1-30",
"disabled":false

                    },

                    {
"id":10,
"label":"三级 1-1-2 是部门",
"depType":5,
"disabled":false

                    }

                ]

            }

        ]

    },

    {
"id":2,
"label":"一级 2 部门",
"depType":1,
"disabled":false,
"children":[

            {
"id":5,
"label":"二级 2-1  张三",
"disabled":false

            },

            {
"id":6,
"label":"二级 2-2 李四",
"disabled":false

            }

        ]

    },

    {
"id":3,
"label":"一级 3 部门",
"depType":1,
"disabled":false,
"children":[

            {
"id":7,
"depType":1,
"label":"二级 3-1 王武",
"disabled":false

            },

            {
"id":8,
"label":"二级 3-2 赵柳",
"disabled":false

            }

        ]

    }

]

上述数据，有的有 deptType字段 ，有的节点没有， 这其实是业务场景的特殊规则，有deptType的认为这个节点为部门节点，没有的则为 员工

<template>
<div>
<el-tree
node-key="id"
show-checkbox
:data="treeData"
:render-content="renderContent"
class="tree-box"

            @node-expand='onNodeExpand'

        ></el-tree>
<div>

<ul>
<li>一开始的数据结构必须都有 disabled字段, 默认不禁用，设置为 false  否则会出现视图的响应式延迟问题</li>
<li>是否禁用某个节点，根据renderContent  里面的规则来的， 规则是， 只要是部门的维度，就禁用  设置 data.disabled= true</li>
<li>tree的第一层节点隐藏，是通过js控制的</li>
</ul>
</div>
</div>

</template>

<script>
import treeData from './treeData.js'

export default {
name: 'render-content-tree',
data() {
return {

            treeData

        }

    },
mounted() {
let nodes = document.querySelector('.tree-box')
let children = nodes.querySelectorAll('.el-tree-node')

for(let i=0; i< children.length; i++) {

            children[i].querySelector('.el-checkbox').style.display = 'none'

        }

// 第一层不要checkbox
// 后续根据规则来

    },

methods: {
renderContent(h, { node, data, store }) {
// console.log(node, data)

// 如果不是一级节点，并且符合数据的特定要求，比如这里是 id 大于27 的数据，禁用掉
if (node.level !== 1 &&  data.id > 27) {

                data.disabled = true

            }

return h('div', 

                {
// 如果是部门，就将所有的 checkbox 都隐藏
class: data.depType === undefined ? '' : 'dept-node'

                }, 

                data.label)

        },

setDeptNodeHide() {
let deptNodes = document.querySelectorAll('.dept-node')

for(let i=0; i<deptNodes.length; i++) {
let checkbox = deptNodes[i].parentNode.querySelector('.el-checkbox')


            checkbox.style.display = 'none'

          }

        },

onNodeExpand(data, node, com) {
// console.log(data);
// console.log(node);
// console.log(com);

this.$nextTick(() => {
this.setDeptNodeHide()

          })

        }

    }

}
</script>

节点初次渲染的效果.png

展开后的效果

部门节点没有checkbox, 符合特定规则的c