使用element-ui框架的积累(四)

如何实现树型结构单选

树型结构数据 single.json

[{
    "id": "1",
    "label": "running man",
    "children": [{
        "id": "r1",
        "label": "刘在石"
    }, {
        "id": "r2",
        "label": "池石镇"
    }, {
        "id": "r3",
        "label": "金钟国"
    }, {
        "id": "r4",
        "label": "gray"
    }, {
        "id": "r5",
        "label": "HAHA"
    }, {
        "id": "r6",
        "label": "宋智孝"
    }, {
        "id": "r7",
        "label": "李光洙"
    }]
},{
    "id":"2",
    "label":"仙剑奇侠传三",
    "children":[
        {
            "id":"x1",
            "label":"景天"
        },{
            "id":"x2",
            "label":"徐长卿"
        },{
            "id":"x3",
            "label":"龙葵"
        },{
            "id":"x4",
            "label":"茂茂"
        },{
            "id":"x5",
            "label":"唐雪见"
        },{
            "id":"x6",
            "label":"紫萱"
        },{
            "id":"x7",
            "label":"重楼"
        },{
            "id":"x8",
            "label":"邪剑仙"
        }
    ]
},{
    "id":"3",
    "label":"山海情",
    "children":[
        {"id":"s1","label":"李水花"},
        {"id":"s2","label":"白麦苗"}
    ]
}]

index.vue

<template>
　　<el-tree :data="singleTree" node-key="id" ref="singleTree" show-checkbox :check-strictly="true" @check-change="handlerSingleSelect"> </el-tree>
</template>

<script>
  export default {
    data() {
      return {
        singleTree:[],//实现单选树型结构数据
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {  
        this.$http.get("http://localhost:3000/public/single.json").then(res=>{
          this.singleTree=this.disabledParent(res.data);
        })
      },
      // 禁止父节点被点击
      disabledParent(data) {
        data.forEach((node) => {
          if (node.children) {
            node.disabled = true;
            this.disabledParent(node.children)
          } else {
            return
          }
        })
        return data;
      },
      handlerSingleSelect(data,check,node){
        if(check){
          this.$refs.singleTree.setCheckedNodes([data])
        }
        console.log(data,node)
      }
    }
  };
</script>