Vue.js 使用 API 传参构建树形结构 - 详细教程与示例

在 Vue.js 中，可以使用 axios 或其他 HTTP 请求库来发送 API 请求并传递 accountsid 作为参数。然后，根据接口返回的数据，可以使用递归或其他方法来构建树形结构。\n\n以下是一个示例代码：\n\njavascript\n// 在 Vue 组件中发送 API 请求\nimport axios from 'axios';\n\nexport default {\n data() {\n return {\n treeData: [] // 存储树形结构数据\n };\n },\n methods: {\n async fetchData(accountsid) {\n try {\n const response = await axios.get('/api/tree', {\n params: {\n accountsid: accountsid\n }\n });\n const apiData = response.data;\n this.treeData = this.buildTree(apiData); // 构建树形结构\n } catch (error) {\n console.error(error);\n }\n },\n buildTree(data) {\n // 使用递归或其他方法构建树形结构\n // 你可以根据返回的数据结构和逻辑来编写具体的构建代码\n // 这里只是一个简单的示例\n const tree = [];\n const map = {};\n\n data.forEach(node => {\n map[node.id] = node;\n node.children = [];\n });\n\n data.forEach(node => {\n if (node.parentId) {\n map[node.parentId].children.push(node);\n } else {\n tree.push(node);\n }\n });\n\n return tree;\n }\n }\n}\n\n\n在上面的代码中，fetchData 方法会发送 API 请求并传递 accountsid 作为参数。在请求成功后，会将返回的数据传递给 buildTree 方法来构建树形结构。你可以根据实际情况修改 buildTree 方法来适应你的数据结构和逻辑。\n\n请记得将 /api/tree 替换为你实际的 API 接口地址。