el-tree改造了下
可选可取消 有默认值 不包含父级id（也可打开注释 包含父级id） 默认展开 点击节点也可触发选择 节点内容自定义

javascript"><template><div class="absolute"><el-scrollbar class="pall"><div class="ball mb radius overflow"><div class="bb" style="background: rgba(124, 162, 121, 0.1); padding: 4px 16px;"><el-checkbox @change="selectCheckBox($event,1)">拓扑图树结构</el-checkbox></div><!--default-checked-keys:默认展开值（正常来说需要包含父级id的 但是我们后端不要后端id ）show-checkbox：多选框node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的default-expand-all：是否默认展开所有节点expand-on-click-node：是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点default-checked-keys：默认勾选的节点的 key 的数组check-on-click-node：是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点props：配置选项，具体看下表-->{{ childKeys }}<div style="padding: 4px 20px"><el-tree :key="keyIndex" ref="treeRef" class="tree_ref" style="max-width: 600px" :data="data" show-checkboxnode-key="id" :default-expand-all="true" :expand-on-click-node='false' :default-checked-keys="childKeys":check-on-click-node="true" :props="defaultProps" @check-change="checkChange"><template #default="{ node, data }"><span class="custom-tree-node"><span>{{ node.label }}</span><span style="color:red;margin-left: 10px">id:{{data.id }}</span></span></template></el-tree></div></div></el-scrollbar></div></template><script setup>
import { ref } from 'vue';let treeRef = ref(null);
let childKeys = ref([5, 10]); // 初始化选中子节点的 ID
const defaultProps = {children: 'children',label: 'label',
};
let keyIndex = ref(1) // 注意该key在需要全id和只需要子集id的时候用法不同
const data = [{id: 1,label: 'Level one 1',children: [{id: 4,label: 'Level two 1-1',children: [{id: 9,label: 'Level three 1-1-1',},{id: 10,label: 'Level three 1-1-2',},],},],},{id: 2,label: 'Level one 2',children: [{id: 5,label: 'Level two 2-1',},{id: 6,label: 'Level two 2-2',},],},{id: 3,label: 'Level one 3',children: [{id: 7,label: 'Level two 3-1',},{id: 8,label: 'Level two 3-2',},],},
];const checkChange = () => {// 获取所有选中的节点对象const checkedNodes = treeRef.value.getCheckedNodes();// // 结果1:获取包含父节点的id// childKeys.value = treeRef.value.getCheckedKeys()// 结果2：提取子节点的 ID，不包括父节点childKeys.value = checkedNodes.filter(node => !node.children) // 只保留没有子节点的节点.map(node => node.id); // 提取 IDconsole.log('默认值', childKeys.value, checkedNodes); // 只包含子节点的 IDkeyIndex.value++
}// 手动全选
const selectCheckBox = (value, num) => {// console.log(value, num);// // 结果1:获取包含父节点的id// if (value) {//   childKeys.value = getAllNodeIds(data)//   console.log('所有层级id', getAllNodeIds(data));// } else {//   // 取消勾选所有节点//   childKeys.value = []//   treeRef.value.setCheckedKeys([]);// }// keyIndex.value++// 结果2：提取子节点的 ID，不包括父节点if (value) {// 勾选所有节点const allKeys = data.flatMap(node => getAllNodeKeys(node));treeRef.value.setCheckedKeys(allKeys);} else {childKeys.value = []// 取消勾选所有节点treeRef.value.setCheckedKeys([]);}
};
const getAllNodeKeys = (node) => {let keys = [node.id];if (node.children) {node.children.forEach(child => {keys = keys.concat(getAllNodeKeys(child));});}console.log(keys);return keys;
}// 递归函数获取所有节点的 ID
const getAllNodeIds = (nodes) => {let ids = [];nodes.forEach(node => {ids.push(node.id); // 添加当前节点的 IDif (node.children) {ids = ids.concat(getAllNodeIds(node.children)); // 递归调用以获取子节点的 ID}});return ids;
};
</script>
<style lang="scss" scoped>
:deep(.tree_ref) {margin-left: 12px;.el-tree-node__expand-icon {display: none;}
}
</style>