vue2.0 加载部门树组件，默认只请求一条数据，也就是父ID为0的所有数据，目前只有一条，能过父ID去查找下面有没有子组才显示子数据

Question

1、是在vue.js 写的，需要在移动端上显示，目前只有这个样子，这是没做完的

2、希望能做成这无限能加载的，默认显示所有的一级，点击谁才展示谁，不想一次性展所所有，因为有好几十条

Answer 1

在Vue 2.0中，您可以使用递归组件来加载部门树组件。递归组件是一种可以在其模板中调用自身的组件。

首先，您需要创建一个部门树组件，该组件会根据父ID加载数据并显示子数据。以下是一个示例：

<template>
  <div>
    <ul>
      <li v-for="department in departments" :key="department.id">
        {{ department.name }}
        <department-tree v-if="department.children.length" :departments="department.children"></department-tree>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'DepartmentTree',
  props: {
    departments: {
      type: Array,
      required: true
    }
  }
}
</script>

在上面的示例中，DepartmentTree 组件接收一个 departments 属性，该属性是一个数组，包含了部门的数据。在模板中，我们使用 v-for 指令遍历每个部门，并显示部门的名称。然后，我们检查该部门是否有子部门（通过检查 department.children.length 是否大于零），如果有子部门，则递归调用 DepartmentTree 组件，并将子部门数组作为新的 departments 属性传递给子组件。

接下来，您需要在父组件中加载默认数据（父ID为0的所有数据），并将其传递给 DepartmentTree 组件。以下是一个示例：

<template>
  <div>
    <department-tree :departments="departments"></department-tree>
  </div>
</template>

<script>
import DepartmentTree from './DepartmentTree.vue';

export default {
  name: 'App',
  components: {
    DepartmentTree
  },
  data() {
    return {
      departments: [] // 默认数据为空数组
    };
  },
  mounted() {
    this.fetchData(); // 在组件挂载后加载数据
  },
  methods: {
    fetchData() {
      // 发起请求获取父ID为0的所有数据，并将其赋值给 departments 属性
      // 这里使用异步请求作为示例，您可以根据实际情况进行修改
      fetch('/api/departments') // 假设请求路径为 '/api/departments'
        .then(response => response.json())
        .then(data => {
          this.departments = data; // 将获取到的数据赋值给 departments 属性
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

在上面的示例中，我们在父组件的 data 中定义了一个空的 departments 数组，并在组件挂载后调用 fetchData 方法加载数据。在 fetchData 方法中，我们发起异步请求获取父ID为0的所有数据，并将返回的数据赋值给 departments 属性。一旦数据加载完成，它将被传递给 DepartmentTree 组件进行渲染。