使用element-ui框架积累(三)

el-tree组件实现禁止选中父组件操作

关键点:disabled:true。

tree.json数据

[{
        "id": "1",
        "name": "计算机信息管理",
        "children": [{
            "id": "a1",
            "name": "团委",
            "children":[{
                "id":"b1",
                "name":"Lisa"
            },{
                "id":"b2",
                "name":"Lizzy"
            }]
        }, {
            "id": "a2",
            "name": "同学1"
        }, {
            "id": "a3",
            "name": "同学2"
        }, {
            "id": "a4",
            "name": "同学3"
        }, {
            "id": "a20",
            "name": "同学4"
        }, {
            "id": "a5",
            "name": "同学5"
        }]
    }, {
        "id": "2",
        "name": "计算机网络通信",
        "children": [{
            "id": "a6",
            "name": "同学6"
        }, {
            "id": "a7",
            "name": "Linda"
        }]
    }, {
        "id": "3",
        "name": "计算机大数据",
        "children": [{
            "id": "a8",
            "name": "黄1"
        }, {
            "id": "a9",
            "name": "吕1"
        }, {
            "id": "a10",
            "name": "聂1"
        }, {
            "id": "a11",
            "name": "童1"
        }]
    },{
        "id":"4",
        "name":"计算机软件开发",
        "children":[
            {
                "id": "a12",
                "name": "韩1"
            }
        ]
    },{
        "id":"5",
        "name":"其他",
        "children":[
        ]
    }
]

index.vue

<template>
    <el-tree
        :data="treeData"
        show-checkbox ref="tree"
        :props="defaultProps"
        :highlight-current="true"
        node-key="id"
        empty-text="数据加载中……"
        :check-strictly="true"></el-tree>
</template>

<script>
  export default {
    data() {
      return {
        treeData: [], //树型结构数据
        defaultProps:{//树型图配置
          children:"children",//指定子树为节点对象的某个属性值
          label:"name"//指定节点标签为节点对象的某个属性值
        },

      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.$http.get("http://localhost:3000/public/tree.json").then(res => {

          this.treeData = this.disabledParent(res.data);
          console.log(this.treeData)
        })
      },
      // 禁止父节点被点击
      disabledParent(data){
        data.forEach((node)=>{
          console.log(node)
          if(node.children){
            node.disabled=true;
            this.disabledParent(node.children)
          }else{
            return
          }
        })
        return data;
      },
    }
  };
</script>

总结:循环遍历数据，判断某一项是否有子节点，有子节点代表是父节点，给相应的父节点添加"父节点.disabled:true"属性，因为可能数据会层层嵌套，所以要使用递归进行判断，能够找到里面的所有父节点进行设置.  要加上  :check-strictly="true"属性，设置父子节点不关联.

 效果图