场景：

近期在实现一个基于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, 符合特定规则的checkbox 禁用