在使用 Element UI 的 <el-tree> 组件时，如果你希望在选中数据后将它们重组为树结构，通常是因为你需要根据这些选中的数据来重新构建一个树形结构，或者对这些选中的数据进行进一步的处理。这里我将提供一个基本的思路和示例代码，帮助你实现这一需求。
步骤 1: 初始化数据
首先，确保你的数据是树形结构的。例如，你可能有一个这样的数据结构：
const treeData = [
{
id: 1,
label: 'Node 1',
children: [
{ id: 2, label: 'Node 1-1' },
{ id: 3, label: 'Node 1-2' }
]
},
{
id: 4,
label: 'Node 2',
children: [
{ id: 5, label: 'Node 2-1' }
]
}
];
步骤 2: 使用 <el-tree> 组件并获取选中数据
在你的 Vue 组件中，使用 <el-tree> 并设置 show-checkbox 以允许用户选择节点：
<template>
<el-tree
:data="treeData"
show-checkbox
node-key="id"
ref="tree"
@check-change="handleCheckChange"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: treeData // 从步骤1中定义的数据
};
},
methods: {
handleCheckChange(data, checked, node) {
console.log(data, checked); // 处理选中状态变化
}
}
};
</script>
步骤 3: 重组选中数据为树结构或其它形式
当节点被选中时，你可以通过 ref 获取到 <el-tree> 组件的实例，并使用它的 getCheckedNodes 方法来获取所有选中的节点。然后，你可以根据这些选中的节点来重组数据。例如，你可以创建一个新的树结构只包含选中的节点：
methods: {
handleCheckChange(data, checked) {
if (checked) { // 只处理选中的节点
const selectedNodes = this.$refs.tree.getCheckedNodes(); // 获取所有选中的节点
const selectedTree = this.buildSelectedTree(selectedNodes); // 构建新的树结构
console.log(selectedTree); // 输出或使用新的树结构
}
},
buildSelectedTree(nodes) {
// 根据选中的节点构建新的树结构，这里简单示例只保留label和id，实际可以根据需要调整结构
return nodes.map(node => ({ id: node.id, label: node.label })); // 可以根据需要调整映射规则，例如包含children等
}
}
注意点：
getCheckedNodes 方法默认返回所有选中的节点，包括半选节点。如果你只想要完全选中的节点（即叶子节点），可以使用 getCheckedNodes(false, true)。
根据你的具体需求调整 buildSelectedTree 方法中的逻辑，例如你可能需要递归处理以保持原有的父子关系。例如：
buildSelectedTree(nodes) {
return nodes.map(node => ({ id: node.id, label: node.label, children: this.buildSelectedTree(node.children || []) })); // 递归处理子节点
}
通过以上步骤，你可以根据 <el-tree> 中选中的数据来重组树结构或者进行其他处理。