使用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>

 实现自定义图标

 

 

 

 

关键代码

<el-tree
          :data="dataTree"
          :check-strictly="true"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
           :render-content="renderContent"
        >
        </el-tree>

  mounted() {
    let dataInfo = [
      {
        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: "白麦苗" },
        ],
      },
    ];
    this.dataTree = this.formatTreeData(dataInfo);
  },

methods:{
 renderContent(h,{node,data,store}){
      return(<span><i class={data.iconType}></i><span>{node.label}</span></span>)

    },
    formatTreeData(data) {
      if (data && data.length > 0) {
        data.forEach((item) => {
          if (item.children) {
            item.iconType = "el-icon-menu";
            this.formatTreeData(item.children);
          } else {
            item.iconType = "el-icon-s-custom";
            return;
          }
        });
      }
      return data;
    },

}

 

 

 

1111