确定数据结构在进行转换前，我们需要先确定我们要转换的数据结构，本文以以下数据结构为例：
let dataarray = [ { id: 1, name: 'parent1', parentid: 0 }, { id: 2, name: 'parent2', parentid: 0 }, { id: 3, name: 'child1', parentid: 1 }, { id: 4, name: 'child2', parentid: 1 }, { id: 5, name: 'child3', parentid: 2 }, { id: 6, name: 'grandchild1', parentid: 3 }, { id: 7, name: 'grandchild2', parentid: 3 }];
其中，每个元素包含一个id，名称和其父元素的id。这个数据结构可以用来表示一个有父子关系的树形结构。
实现转换方法接下来，我们需要实现一个转换方法。根据我们的数据结构，我们可以定义一个节点类：
class node{ constructor(data){ this.id = data.id; this.name = data.name; this.parentid = data.parentid; this.children = []; }}
其中，id、name、parentid表示节点的id、名称以及父节点的id，children表示该节点下的子节点集合。
接着，我们在根据原始数组，创建根节点：
function buildtree(dataarray) { let root = new node({ id: 0, name: 'root', parentid: null }); // 循环处理每个节点 for(let i=0;i<dataarray.length;i++){ let data = dataarray[i]; let node = new node(data); // 添加到父节点下 let parent = findnode(root, data.parentid); parent.children.push(node); } return root.children;}// 根据id查找节点function findnode(node, targetid) { if (node.id === targetid) { return node; } else { for (let i = 0; i < node.children.length; i++) { let result = findnode(node.children[i], targetid); if (result !== null) { return result; } } return null; }}
在buildtree方法中，我们首先创建一个根节点，然后我们循环遍历dataarray，创建每个节点，并将其添加到其父节点的children属性中。
findnode方法用于查找指定id的节点，当我们在循环时遇到该节点时，我们将其添加到其父节点的children属性中。
测试结果我们现在可以测试一下我们的方法：
let treedata = buildtree(dataarray);console.log(json.stringify(treedata));
输出结果如下：
[ { "id": 1, "name": "parent1", "parentid": 0, "children": [ { "id": 3, "name": "child1", "parentid": 1, "children": [ { "id": 6, "name": "grandchild1", "parentid": 3, "children": [] }, { "id": 7, "name": "grandchild2", "parentid": 3, "children": [] } ] }, { "id": 4, "name": "child2", "parentid": 1, "children": [] } ] }, { "id": 2, "name": "parent2", "parentid": 0, "children": [ { "id": 5, "name": "child3", "parentid": 2, "children": [] } ] }]
我们可以看到，我们成功将原始数组转换为树形结构数据。
总结在vue中，很多操作都离不开数组，当我们需要展示复杂的树形结构数据时，我们可以将数组转换为树结构数据。本文介绍了vue数组转换为树结构的实现方法，首先确定了数据结构，然后实现了转换方法，最后我们进行了测试，得出了正确的结果。您可以根据这个方法，来转换您的vue数组数据，以便在页面上方便地展示和操作。
以上就是vue数组转成树结构的详细内容。