Element-ui中 树形控件（Tree）实现只显示某一层级复选框且单选

Posted 2021-09-16 明天也要努力

需求：
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 属性

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示
run-in	此元素会根据上下文作为块级元素或内联元素显示
table	此元素会作为块级表格来显示（类似 < table >），表格前后带有换行符
inline-table	此元素会作为内联表格来显示（类似 < table >），表格前后没有换行符
inherit	规定应该从父元素继承 display 属性的值
table-row-group	此元素会作为一个或多个行的分组来显示（类似 < tbody >
table-header-group	此元素会作为一个或多个行的分组来显示（类似 < thead >）
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 < tfoot >）
table-row	此元素会作为一个表格行显示（类似 < tr >）
table-column-group	此元素会作为一个或多个列的分组来显示（类似 < colgroup >）
table-column	此元素会作为一个单元格列显示（类似 < col >）
table-cell	此元素会作为一个表格单元格显示（类似 < td > 和 < th >）
table-caption	此元素会作为一个表格标题显示（类似 < caption >）