需求：
tree 组件可实现多选，但复选框在树结构中每一层级都有。如果只想某个层级展示复选框且实现单选需要怎么修改呢？
思路：
- 原本想通过禁用某些层级的复选框，达到只能某一层数据可选的功能，但是禁用的复选框仍然显示 效果不好。
通过审查元素发现被禁用的复选框加上了特殊 “类名”（ is-disabled ） 。
因此：我们可以先通过处理 tree 数据的某些层级 disabled 为 true，设置被禁用节点的 display 属性来隐藏该层级复选框。
2.节点单选： 注意：如果要单选，一定要设置 tree的属性 check-strictly 为 true，否则部分节点选择不正常。
完整代码：
<template> <div class="wrap"> <el-tree :data="treeData" ref="tree" show-checkbox :check-strictly="true" node-key="id" :props="defaultProps" @check-change="treeCheckedChange"> </el-tree> </div> </template> <script> export default { data() { return { defaultProps: { children: 'children', label: 'label' }, treeData:[], testdata: [{ id: 1, label: '一级 1', children: [{ id: 3, label: '二级 1-1', children: [{ id: 7, label: '二级 1-1-1', }] }] }, { id: 2, label: '一级 2', children: [{ id: 4, label: '二级 2-1', children: [{ id: 5, label: '三级 2-1-1' }, { id: 6, label: '三级 2-1-2' }] }] }], }; }, methods:{ formatData(params){ let data = params; data.map((item) => { if(item.hasOwnProperty('children')){ item.disabled = true; this.formatData(item.children) } }); return data; }, treeCheckedChange(data,isChecked){ if(isChecked){ const checked = [data.id]; // id为tree的node-key属性 this.$refs.tree.setCheckedKeys(checked); } }, }, mounted(){ this.treeData = this.formatData(this.testdata); } }; </script> <style lang="stylus" scoped> .wrap{ /deep/.el-checkbox__input.is-disabled{ display: none; } } </style>
效果：
延伸
CSS display 属性
