<template>
<div>树形菜单</div>
<div>
{{ newTreeData }}
</div>
</template>
<script>
export default {
data() {
return {
newTreeData: [],
treeData: [
{
id: "1",
name: "A",
status: "A",
createTime: "A",
updateTime: "A",
category_id: "A",
order: "A",
child: [
{
id: "1-1",
name: "1-1",
status: "1-1",
createTime: "1-1",
updateTime: "1-1",
category_id: "1-1",
order: "1-1",
child: [],
},
{
id: "1-2",
name: "1-2",
status: "1-2",
createTime: "1-2",
updateTime: "1-2",
category_id: "1-2",
order: "1-2",
child: [],
},
],
},
],
};
},
mounted() {
this.newTreeData = this.deepHandle(this.treeData);
},
methods: {
deepHandle(treeData) {
const isArray = Array.isArray(treeData);
if (!isArray) {
return [];
}
const newTreeData = treeData.map((item) => {
const option = {
title: "",
value: item.name,
key: item.id,
children: [],
};
if (Array.isArray(item.child)) {
option.children = this.deepHandle(item.child);
}
return option;
});
return newTreeData;
},
},
};
</script>
<style></style>
最终结果