Element中 el-tree 如何隐藏 Tree 组件中的父节点 Checkbox

文章目录

• • 需求
  • 分析
  • • [1. 取消二者关联](#1. 取消二者关联)
    • [2. 大家可以试一下以下步骤](#2. 大家可以试一下以下步骤)

需求

要求父节点的 checkbook 隐藏，只能选中子节点的

分析

1. 取消二者关联

2. 大家可以试一下以下步骤

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

• 数据 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
            }
        ]
    }
]

• html

<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>