vue树形图展示一对多数据
时间: 2023-07-26 22:34:42 浏览: 56
您可以使用Vue.js和Element UI库来展示一对多的树形数据。首先,您需要将数据转换为树形结构,然后使用Element UI的<el-tree>组件来展示树形数据。以下是一个简单的示例:
```html
<template>
<el-tree :data="treeData" :props="defaultProps"></el-tree>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['getTreeData']),
defaultProps() {
return {
children: 'children',
label: 'label'
};
}
},
mounted() {
this.buildTree();
},
methods: {
buildTree() {
const data = this.getTreeData; // 获取一对多的数据
const tree = []; // 存放树形数据的数组
// 将一对多的数据转换为树形结构
data.forEach(item => {
const parent = tree.find(node => node.name === item.parentName);
const child = { name: item.childName, children: [] };
if (parent) {
parent.children.push(child);
} else {
tree.push({
name: item.parentName,
children: [child]
});
}
});
this.treeData = tree;
}
}
};
</script>
```
在上面的示例中,我们使用了Vuex来获取一对多的数据。然后,我们在组件的mounted()钩子函数中调用buildTree()方法来将数据转换为树形结构。最后,我们将treeData传递给<el-tree>组件来展示树形数据。您需要根据您的数据结构来修改上面的示例代码。