直接上代碼：
<template>
<div>
<ul>
<li v-for="list in datas(dataList)" :key="list.id">
<!-- {{list}} -->
<span>{{list.name}}</span>
<ul>
<li v-for="(item,index) in list.children" :key="index">
<span>{{item.name}}</span>
<ul>
<li v-for="(items,index) in item.children" :key="index">{{items.name}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
{ id: 1, parentId: null, name: "世界" },
{ id: 2, parentId: 1, name: "中國" },
{ id: 201, parentId: 2, name: "湖南" },
{ id: 202, parentId: 2, name: "廣東" },
{ id: 3, parentId: 1, name: "US" },
{ id: 302, parentId: 3, name: "California" },
{ id: 308, parentId: 3, name: "Washington" }
]
};
},
computed: {
datas() {
return function translateDataToTree(data) {
let parents = data.filter(
value => value.parentId == "undefined" || value.parentId == null
);
let children = data.filter(
value => value.parentId !== "undefined" && value.parentId != null
);
let translator = (parents, children) => {
// 遍歷父節點數據
parents.forEach(parent => {
// 遍歷子節點數據
children.forEach((current, index) => {
// 當父節點對應的一個子節點相等時
if (current.parentId === parent.id) {
//對子節點數據進行深復制,防止當temp改變而改變子節點
let temp = JSON.parse(JSON.stringify(children));
// 讓當前子節點從temp中移除，temp作為新的子節點數據
temp.splice(index, 1);
// 讓當前子節點作為唯一的父節點，去遞歸查找其對應的子節點
translator([current], temp);
// 把找到子節點放入父節點的children屬性中
typeof parent.children !== "undefined"
? parent.children.push(current)
: (parent.children = [current]);
}
});
});
};
// 調用轉換方法
translator(parents, children);
//返回
return parents;
};
}
}
};
</script>