Vue树形结构节点点击标记：判断最子节点并设置clickFlag属性

可以通过递归遍历树的每一个节点，在遍历的过程中给每个节点添加clickFlag属性，并判断是否为最子节点。\n\n假设树的数据结构如下：\n\njavascript\n{\n name: \"Node1\",\n children: [\n {\n name: \"Node2\",\n children: [\n {\n name: \"Node3\",\n children: []\n }\n ]\n },\n {\n name: \"Node4\",\n children: []\n }\n ]\n}\n\n\n在Vue组件中，可以使用递归的方式来遍历树的节点，并添加clickFlag属性和判断是否为最子节点。\n\njavascript\n<template>\n <div>\n <div v-for="node in treeData" :key="node.name">\n <span @click="handleClick(node)">{{ node.name }}</span>\n <div v-if="node.children && node.children.length > 0">\n <ChildNodes :childNodes="node.children" />\n </div>\n </div>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n treeData: {\n name: \"Node1\",\n children: [\n {\n name: \"Node2\",\n children: [\n {\n name: \"Node3\",\n children: []\n }\n ]\n },\n {\n name: \"Node4\",\n children: []\n }\n ]\n }\n };\n },\n methods: {\n handleClick(node) {\n console.log(node.name + \" clicked\");\n }\n }\n};\n</script>\n\n\n在上面的代码中，我们使用了一个递归组件ChildNodes来遍历子节点。在递归组件中，我们也需要判断节点是否为最子节点，并设置对应的clickFlag属性。\n\njavascript\n<template>\n <div>\n <div v-for="node in childNodes" :key="node.name">\n <span @click="handleClick(node)">{{ node.name }}</span>\n <div v-if="node.children && node.children.length > 0">\n <ChildNodes :childNodes="node.children" />\n </div>\n </div>\n </div>\n</template>\n\n<script>\n export default {\n props: {\n childNodes: {\n type: Array,\n required: true\n }\n },\n methods: {\n handleClick(node) {\n console.log(node.name + \" clicked\");\n }\n },\n created() {\n this.childNodes.forEach(node => {\n if (node.children && node.children.length > 0) {\n node.clickFlag = false;\n } else {\n node.clickFlag = true;\n }\n });\n }\n};\n</script>\n\n\n在递归组件的created钩子函数中，我们遍历了子节点，并根据是否有children属性和是否有子节点来设置clickFlag属性。\n\n这样，每个节点都会有一个clickFlag属性，用来表示是否为最子节点。