需求：
tree 组件可实现多选，但复选框在树结构中每一层级都有。如果只想某个层级展示复选框且实现单选需要怎么修改呢？

思路：

1. 原本想通过禁用某些层级的复选框，达到只能某一层数据可选的功能，但是禁用的复选框仍然显示 效果不好。
   通过审查元素发现被禁用的复选框加上了特殊 “类名”（ 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 属性