el-tree选中数据重构成树

在利用 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> 中选中的数据来重组树布局大概举行其他处置惩罚。