将数组表现到vue树形控件

在Vue.js中，将数组转换成树形结构并显示在树形控件中通常涉及到递归数据处理。假设你有一个简单的数组，每个元素都有`parent_id`表示层级关系，你可以按照以下步骤操作：

1. 定义一个递归函数：

function arrayToTree(data, rootId = null) {
    return data.filter(item => item.parent_id === rootId)
        .map(item => ({
            ...item,
            children: arrayToTree(data, item.id),
        }));
}

2. 初始化组件的数据：

data() {
    return {
        treeData: [], // 初始为空，会在组件挂载后通过上述函数计算
        items: yourArray, // 这里替换为实际的数组
    };
},

3. 组件挂载后计算树形结构：

created() {
    this.treeData = arrayToTree(this.items);
},

4. 使用一个树形组件（如Element UI的el-tree组件）来渲染数据：

<template>
  <el-tree :data="treeData" :props="{children: 'children', label: 'name'}">
  </el-tree>
</template>