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

需求

要求父节点的 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-treenode-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>