如何实现树型结构单选
树型结构数据 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>