vue项目+el-tree,树结构展示,非常完整的代码,包含调接口拿真实数据渲染
时间: 2024-05-03 07:19:01 浏览: 16
以下是一个使用 Vue 和 Element UI 的树形结构展示示例,其中包含从接口获取真实数据并渲染的完整代码:
```
<template>
<div>
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
treeData: [],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
mounted() {
// 获取数据
this.fetchData();
},
methods: {
fetchData() {
axios.get('your-api-url').then(response => {
this.treeData = response.data;
});
},
handleNodeClick(data) {
console.log(data);
}
}
}
</script>
```
在上面的代码中,我们首先引入了 Axios 库,用于从接口中获取数据。然后在 `data` 中定义了 `treeData` 和 `defaultProps`,`treeData` 用于存储从接口获取到的数据,`defaultProps` 用于设置树形结构的默认属性。在 `mounted` 钩子中调用 `fetchData` 方法,该方法通过 Axios 发送 HTTP 请求并将响应数据赋值给 `treeData`。最后,在 `methods` 中定义了 `handleNodeClick` 方法,该方法会在节点被点击时被调用,并输出节点数据。
需要注意的是,我们需要根据接口返回的数据结构来设置 `defaultProps` 的 `children` 和 `label` 属性。