在使用 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> 中选中的数据来重组树结构或者进行其他处理。