vue树形平面图含中间变量

您好！感谢您的提问。如果我理解您的意思正确的话，您想要实现一个Vue树形平面图，并且需要使用中间变量来存储数据，让我来为您解答。

首先，如果您想要实现一个Vue树形平面图，可以使用一些开源的Vue组件库，例如Vue D3 Tree。这些组件库可以帮助您快速构建树形平面图，并提供了一些常用的交互功能，如缩放、拖拽等。

对于中间变量的问题，您可以使用Vue的数据响应式机制来存储和更新数据。您可以在组件的data选项中定义一个中间变量，并在组件的模板中使用该变量来存储和显示数据。当您更新该变量的值时，Vue会自动重新渲染组件，并更新显示的数据。

以下是一个简单的示例代码，演示了如何使用Vue D3 Tree组件库实现一个树形平面图，并使用中间变量来存储数据：

<template>
  <div>
    <vue-d3-tree :data="treeData" :options="treeOptions"></vue-d3-tree>
  </div>
</template>

<script>
import VueD3Tree from 'vue-d3-tree'

export default {
  name: 'tree-view',
  components: {
    VueD3Tree
  },
  data() {
    return {
      // 定义中间变量
      tempData: [],
      // 树形平面图数据
      treeData: {
        name: 'root',
        children: []
      },
      // 树形平面图配置
      treeOptions: {
        nodeSize: { x: 150, y: 100 },
        render: (node) => {
          return `<div>${node.name}</div>`
        }
      }
    }
  },
  watch: {
    // 监听tempData变化，更新树形平面图数据
    tempData: {
      handler(newVal) {
        this.treeData.children = newVal
      },
      immediate: true
    }
  }
}
</script>

在上面的代码中，我们使用Vue D3 Tree组件库构建了一个树形平面图，并定义了一个中间变量tempData。我们使用watch选项来监听tempData变化，并在变化时更新树形平面图数据的children属性。最后，我们将树形平面图渲染到模板中，并使用treeOptions配置来定义节点大小和渲染方式。

希望这个简单的示例能够帮助您解决问题。如果您还有任何疑问，请随时向我提出。