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

img


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

img

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

在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 组件进行渲染。

做成异步树，让后端配合多写这个接口，通过父节点id查子节点列表的接口。

这种后端接口处理比较好，后端返回树形结构，前端按照层级进行渲染

想要实现根据父ID动态加载部门树组件的子组数据，可以按照以下步骤进行：

  1. 在父组件中定义一个departments数组，用于存储所有部门数据。
  2. 使用created生命周期钩子函数或其他适当的时机，发送请求获取父ID为0的部门数据，并将数据赋值给departments数组。
  3. 在子组件中定义一个department属性，用于存储当前部门数据。
  4. 在父组件中，使用v-for指令遍历departments数组，渲染父节点，并为每个父节点添加一个点击事件，触发加载子节点数据的函数。
  5. 在事件处理函数中，发送请求获取指定父ID的子组数据，并将数据赋值给当前部门的department属性。
  6. 在子组件中，使用递归的方式渲染子节点，如果当前部门有子组，则继续遍历子组并渲染。

下面是一个示例代码：

父组件：

<template>
  <div>
    <ul>
      <li v-for="dept in departments" :key="dept.id">
        {{ dept.name }}
        <button @click="loadChild(dept.id)">加载子组数据</button>
        <child-component :department="dept" v-if="dept.children" />
      </li>
    </ul>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
  data() {
    return {
      departments: [],
    };
  },
  created() {
    this.fetchDepartments(0); // 获取父ID为0的部门数据
  },
  methods: {
    fetchDepartments(parentId) {
      // 发送请求获取指定父ID的部门数据，并将数据赋值给departments数组
      // 省略实际的请求逻辑，假设请求得到的数据为response.data
      // 执行以下代码将response.data赋值给departments数组：
      // this.departments = response.data;
    },
    loadChild(parentId) {
      const department = this.departments.find((dept) => dept.id === parentId);
      if (department && !department.children) {
        this.fetchDepartments(parentId);
      }
    },
  },
};
</script>

子组件：

<template>
  <ul>
    <li v-for="dept in department.children" :key="dept.id">
      {{ dept.name }}
      <button @click="loadChild(dept.id)">加载子组数据</button>
      <child-component :department="dept" v-if="dept.children" />
    </li>
  </ul>
</template>

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

export default {
  name: 'ChildComponent',
  components: {
    ChildComponent,
  },
  props: {
    department: {
      type: Object,
      required: true,
    },
  },
  methods: {
    loadChild(parentId) {
      const department = this.department.children.find((dept) => dept.id === parentId);
      if (department && !department.children) {
        // 发送请求获取指定父ID的部门数据，并将数据赋值给department.children
        // ...
      }
    },
  },
};
</script>

上述示例中，父组件负责展示父节点和调用加载子组数据的函数，子组件则根据部门数据递归地渲染子节点。父组件通过v-if指令来控制子节点的显示与隐藏。

注意：上述代码只是一个简化的示例，实际代码中需要根据具体情况进行修改和完善。确保根据实际需求来获取和处理数据，并处理错误、加载状态等边界情况。

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
要实现在Vue.js中加载部门树组件，并且只请求父ID为0的数据并查找其子部门，可以采取以下步骤：

  1. 创建组件结构：首先，创建一个Vue组件，用于显示部门树。可以使用递归组件的方式来实现无限嵌套的部门树结构。

  2. 发起请求：在组件的mounted生命周期钩子函数中，使用Vue的HTTP库（如axios）向后端发起请求，获取父ID为0的所有一级部门数据。

  3. 显示一级部门：将获取到的一级部门数据绑定到组件的数据属性中，并在模板中使用v-for指令循环遍历显示每个一级部门的名称。

  4. 点击展开子部门：为每个一级部门添加一个点击事件处理程序，在点击事件处理程序中，根据当前点击的部门ID向后端发送请求，获取该部门的子部门数据。

  5. 递归显示子部门：在模板中使用递归组件的方式，将子部门作为组件自身的子组件进行渲染。当子部门数据获取成功后，将子部门数据传递给递归组件，并以递归组件方式渲染子部门。

下面是一个简单的示例代码：

<template>
  <ul>
    <li v-for="department in departments" :key="department.id">
      <span @click="loadChildDepartments(department.id)">{{ department.name }}</span>
      <department-tree :parent-id="department.id" v-if="department.hasChildren" />
    </li>
  </ul>
</template>

<script>
import axios from 'axios';

export default {
  name: 'DepartmentTree',
  props: {
    parentId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      departments: []
    };
  },
  mounted() {
    this.loadChildDepartments(this.parentId);
  },
  methods: {
    loadChildDepartments(parentId) {
      axios.get(`/api/departments?parentId=${parentId}`)
        .then(response => {
          this.departments = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

请根据您的具体情况进行调整和修改，包括后端接口的请求方式和返回数据的结构。在后端接口中，根据传递的父ID参数查询相应的子部门数据，并在响应中返回给前端。前端根据返回的数据判断是否有子部门，并进行相应的渲染和展示。

同时，您可能需要根据实际情况对样式进行调整，以满足您的设计需求。以上示例代码仅提供了一个基本的部门树组件结构，可以根据您的需要进行扩展和修改。

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢

【相关推荐】




如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

引用 皆我百晓生 小程序回复内容作答：
为了实现默认只加载一条数据，并通过父ID检查是否存在子组并显示子数据，您可以按照以下步骤进行修改：

  1. 在父组件中，将加载的数据存储在一个数组中，例如departments。
data() {
  return {
    departments: [] // 存储部门数据
  };
},
  1. 在父组件的created生命周期中，发送请求获取父ID为0的所有数据，并将返回的数据赋值给departments。
created() {
  // 发送请求获取父ID为0的所有数据，示例使用axios发送请求
  axios.get('/api/departments', { params: { parentId: 0 } })
    .then(response => {
      this.departments = response.data;
    })
    .catch(error => {
      console.error(error);
    });
},
  1. 在父组件的模板中，遍历departments数组，并为每个部门添加一个点击事件处理方法，如loadChildren。
<template>
  <div>
    <ul>
      <li v-for="department in departments" :key="department.id" @click="loadChildren(department)">
        {{ department.name }}
      </li>
    </ul>
  </div>
</template>
  1. 在父组件的方法中，定义loadChildren方法。该方法接收一个部门对象，并发送请求获取该部门的子组。
methods: {
  loadChildren(department) {
    // 发送请求获取部门的子组，示例使用axios发送请求
    axios.get('/api/departments', { params: { parentId: department.id } })
      .then(response => {
        department.children = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}
  1. 如果希望通过递归的方式一直加载子组，您可以在父组件的模板中使用v-if指令来判断是否存在子组，并在存在子组的时候展示子组件。在子组件中，您可以按照相同的逻辑加载子组的子组。
<template>
  <div>
    <ul>
      <li v-for="department in departments" :key="department.id" @click="loadChildren(department)">
        {{ department.name }}
        <ul v-if="department.children && department.children.length > 0">
          <department-tree :departments="department.children"></department-tree>
        </ul>
      </li>
    </ul>
  </div>
</template>

上述代码中，通过递归的方式展示子组件，只有当当前部门存在子组时才会展示子组件。在子组件中，您可以将子组命名为department-tree，并将子组部门传递给department-tree组件的departments属性。

这样，您应该能够实现默认只加载一条数据，并根据父ID检查是否存在子组并显示子数据的功能。根据您的需求，点击父级部门时，会加载该部门的子组，并递归加载子组的子组，实现无限加载的树形组件效果。

监听点击用access请求。

你可以参考一下这个代码

<template>
  <div>
    <ul>
      <li v-for="department in departments" :key="department.id">
        {{ department.name }}
        <button @click="loadChildren(department.id)">加载子部门</button>
        <ul v-if="department.children">
          <li v-for="child in department.children" :key="child.id">
            {{ child.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      departments: [], // 存储部门数据
    };
  },
  mounted() {
    // 默认加载顶层部门数据
    this.loadDepartmentsByParentId(0);
  },
  methods: {
    // 根据父ID加载部门数据
    loadDepartmentsByParentId(parentId) {
      // 发起请求，获取部门数据
      // 你可以使用axios或其他HTTP库来实现请求
      // 假设部门数据以数组形式返回
      // 这里需要替换成实际的接口请求
      // 示例代码：
      // axios.get(`/api/departments?parentId=${parentId}`)
      //   .then(response => {
      //     this.departments = response.data;
      //   })
      //   .catch(error => {
      //     console.error('加载部门数据失败', error);
      //   });

      // 模拟数据
      if (parentId === 0) {
        this.departments = [
          {
            id: 1,
            name: '部门1',
            children: null, // 初始时子部门为空
          },
        ];
      }
    },
    // 加载指定部门的子部门数据
    loadChildren(parentId) {
      const department = this.departments.find(d => d.id === parentId);
      if (department) {
        // 模拟请求子部门数据
        // 假设部门数据以数组形式返回
        // 这里需要替换成实际的接口请求
        // 示例代码：
        // axios.get(`/api/departments?parentId=${parentId}`)
        //   .then(response => {
        //     department.children = response.data;
        //   })
        //   .catch(error => {
        //     console.error('加载子部门数据失败', error);
        //   });

        // 模拟数据
        department.children = [
          {
            id: 2,
            name: '子部门1',
          },
          {
            id: 3,
            name: '子部门2',
          },
        ];
      }
    },
  },
};
</script>

Vue + Element tree树形控件的懒加载使用

页面 
<el-tree
      :data="treeData"
      :props="defaultProps"
      :load="loadNode"
      @node-click="handleNodeClick"
       lazy>
 </el-tree>

data

treeData: [ ],      // 树节点
defaultProps: {     // 修改el-tree默认data数组参数
       children: 'children',
       label: 'name',
       id: 'id',
       parentId: 'parentId',
       isLeaf: false      // 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
},

script

loadNode(node, resolve) {        // 加载 树数据   
                let that = this;
 
                if (node.level === 0) {
                    that.loadtreeData(resolve);
                }
 
                if (node.level >= 1) {
                    this.getChildByList(node.data.id, resolve);
                    return resolve([]); // 加上这个，防止在该节点没有子节点时一直转圈的问题发生。
                } 
},
loadtreeData( resolve) {      // 获取loadtreeData 就是父节点数据，getChildByList就是异步获取子节点数据
                let params = {ParentID : 0};
             
                this.$http({url: "",data: params,type: 'get'}).then(res =>{ 
                    // console.log("商品信息的 tree: ",res)   
                    if(res.success == true) {
                        let data = res.data;
                        // 前者item.参数名称为 prop中的规定的属性名称
                        data.forEach(item => {
                            item.name = item.name;
                            item.parentId = item.parentId;
                            item.id = item.id;
                            item.isLeaf = true;
                        });
                        resolve(data)
                    }else {
                        return false;
                    }    
    
                }).catch(err =>{
                    console.log(err);
                });
},
getChildByList( _parentID,resolve) {     // 获取子节点请求
                let params = {ParentID : _parentID};
                this.$http({url: "",data: params,type: 'get'}).then(res =>{ 
                    if(res.success == true) {
                        let data = res.data;
                        data.forEach(item => {
                            item.name = item.name;
                            item.parentId = item.parentId;
                            item.id = item.id;
                            item.isLeaf = false;
                        });
                        resolve(data);
                    } else {
                        return false;
                    }   
                }).catch(err =>{
                    console.log(err);
                });
},
 
 handleNodeClick(data) {          // 节点被点击时的回调      
                console.log(data)
 },

结合GPT给出回答如下请题主参考
好的，以下是一个可能的解决方案：

组件结构设计

首先，我们需要在 Vue.js 中设计一个组件，用于展示部门树。根据需求，这个组件应该是可以无限级嵌套的，也就是说，它自己可以包含自己。我们采用递归组件的方式来实现这一点。具体来说，组件的结构应该如下所示：

<template>
  <div class="dept-tree">
    <div class="dept-item" v-for="dept in depts" :key="dept.id">
      <div class="dept-info" @click="toggle(dept)">
        <span>{{ dept.name }}</span>
        <i :class="{'icon-arrow-down': dept.opened, 'icon-arrow-right': !dept.opened}"></i>
      </div>
      <dept-tree v-if="dept.opened && dept.children.length > 0" :depts="dept.children"></dept-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeptTree',
  props: {
    depts: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  methods: {
    toggle(dept) {
      dept.opened = !dept.opened
    }
  }
}
</script>

<style scoped>
.dept-tree {
  margin-left: 20px;
}
.dept-item {
  margin-bottom: 6px;
}
.dept-info {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.dept-info > span {
  flex-grow: 1;
}
.icon-arrow-right:before {
  content: '\f0da';
  font-family: 'FontAwesome';
  font-size: 16px;
  margin-right: 6px;
}
.icon-arrow-down:before {
  content: '\f0d7';
  font-family: 'FontAwesome';
  font-size: 16px;
  margin-right: 6px;
}
</style>

说明：

  • 这个组件接受一个名为 depts 的 prop，它是一个部门对象数组，每个部门对象包含 id、name、parentId 和 children 等属性。
  • 组件中采用 v-for 指令遍历 depts 数组，并使用 :key 绑定 dept.id，以避免性能问题。
  • 每个部门项包含一个 div.dept-info 和一个嵌套的 dept-tree 组件。
  • 点击部门信息区域时，会触发 toggle 方法，用于切换当前部门的打开/关闭状态。
  • 根据当前部门的打开状态和 dept.children 属性，来决定是否显示嵌套的 dept-tree 组件。

数据获取和处理

要实现部门树的展示，我们需要先从服务器端获取数据，并将扁平的部门列表转换为树形结构。这里提供一个示例数据和转换方法：

const DEPT_LIST = [
  { id: 1, name: '研发部', parentId: 0 },
  { id: 2, name: '产品部', parentId: 0 },
  { id: 3, name: '前端组', parentId: 1 },
  { id: 4, name: '后端组', parentId: 1 },
  { id: 5, name: '测试组', parentId: 1 },
  { id: 6, name: '市场部', parentId: 0 },
  { id: 7, name: '销售部', parentId: 0 },
  { id: 8, name: '运营部', parentId: 0 },
  { id: 9, name: '客服部', parentId: 0 },
  { id: 10, name: '客户组', parentId: 9 },
  { id: 11, name: '售后组', parentId: 9 }
]

function buildDeptTree(deptList) {
  const deptMap = new Map()
  const rootDepts = []

  // 先遍历一遍列表，将每个部门对象转为带有子节点数组的对象
  for (const dept of deptList) {
    dept.children = []
    dept.opened = false
    deptMap.set(dept.id, dept)
  }

  // 再遍历一遍列表，将子节点挂到其父节点的 children 数组中
  for (const dept of deptList) {
    const parentDept = deptMap.get(dept.parentId)
    if (parentDept) {
      parentDept.children.push(dept)
    } else {
      rootDepts.push(dept)
    }
  }

  return rootDepts
}

const depts = buildDeptTree(DEPT_LIST)

说明：

  • const DEPT_LIST 是一个示例数据，包含了一些部门对象。
  • buildDeptTree 方法接受部门列表 deptList，并返回一个树形结构的部门对象数组。
  • buildDeptTree 方法先遍历 deptList，将每个部门对象转为带有 children 和 opened 属性的对象，并使用 deptMap 记录每个部门对象的引用。
  • 再遍历一遍 deptList，将每个子节点挂到其父节点的 children 数组中，或者直接加到 rootDepts 数组中（如果该子节点没有父节点，则认为它是根节点）。

组件使用

最后，我们可以在 Vue.js 中使用 DeptTree 组件来展示部门树了。例如：

<template>
  <div>
    <dept-tree :depts="depts"></dept-tree>
  </div>
</template>

<script>
import DeptTree from './components/DeptTree.vue'

export default {
  name: 'App',
  components: {
    DeptTree
  },
  data() {
    return {
      depts
    }
  }
}
</script>

说明：

  • 首先，我们需要在 App.vue 中引入 DeptTree 组件。
  • 然后在 data 中定义一个名为 depts 的数组，它是一个树形结构的部门对象数组，可以通过上文提供的 buildDeptTree 方法来转换扁平的部门列表。
  • 最后，我们可以在模板中使用 <dept-tree> 标签，将 depts 数组传递给 DeptTree 组件的 depts prop。

该回答引用ChatGPT，希望对题主有所帮助，如有帮助，还望采纳。

你可以通过递归的方式来实现树形结构的展示和加载。具体步骤如下：

  1. 初始时，发送请求获取父ID为0的所有数据，将其展示在页面上。

  2. 当用户点击某个父节点时，通过该节点的ID发送请求获取其所有子节点数据。这里可以使用Vue的事件监听机制来实现。

  3. 将获取到的子节点数据添加到父节点下，同时将父节点的状态改为已展开。

  4. 如果某个节点没有子节点，则不需要再进行请求和展开操作。

  5. 可以设置一个递归函数来处理每个父节点的子节点，使其在展开的同时再次请求子节点的子节点数据，直到所有节点都加载完毕。

下面是一个简单的示例代码实现：

<!--部门树组件-->
<template>
  <div class="department-tree" v-if="treeData.length">
    <ul>
      <li v-for="node in treeData">
        <div @click="loadChildren(node)" :class="{expanded: node.expanded}">
          <span>{{node.name}}</span>
          <i v-if="node.children">+</i>
        </div>
        <department-tree v-if="node.children" :treeData="node.children"></department-tree>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'DepartmentTree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    loadChildren(node) {
      if (node.children) {
        node.expanded = !node.expanded;
        return;
      }
      // 请求子节点数据，这里需要根据实际情况进行修改
      fetch(`/department?id=${node.id}`).then(response => {
        return response.json();
      }).then(data => {
        node.children = data;
        node.expanded = true;
      });
    }
  }
}
</script>

在这个示例代码中，我们通过一个department-tree组件来实现树形结构的递归展示，该组件接收一个treeData属性作为树形结构的数据源。在页面中，我们通过一个ul和多个li来展示每个节点，每个节点包含一个div和一个department-tree子组件。当用户点击某个节点时，我们通过loadChildren方法来处理展开和加载子节点的逻辑。具体操作如下：

  1. 如果该节点已经展开且存在子节点，则直接修改展开状态即可。

  2. 如果该节点没有展开或者没有子节点，则发送请求获取其子节点数据，并将其添加到该节点下。同时，将该节点的展开状态修改为已展开。

通过这样的递归方式，我们可以完成树形结构的加载和展示。

创建一个递归组件来表示部门树的每个节点。这个组件需要接受一个node对象作为prop，该对象包含节点的信息，如名称、ID、子节点等。
在组件中，你可以使用v-if条件渲染来决定是否显示子节点。如果节点有子节点，则递归调用自身来渲染子节点。
默认情况下，只加载ID为0的节点，通过在组件中添加一个方法来获取其他节点的数据。当点击一个节点时，可以调用这个方法来加载该节点的子节点。

vue2-org-tree 基于VUE的部门组织架构组件，增删节点实现

参考gpt

要实现加载部门树组件，默认只请求一条数据，然后通过父ID去查找下面是否有子数据才显示子数据，可以按照以下步骤进行：

  1. 在Vue组件中定义一个数据属性，用于存储部门树的数据。例如，可以定义一个名为departmentTree的数组。

  2. 在Vue组件的mounted生命周期钩子中，发送请求获取父ID为0的部门数据。可以使用axios或其他HTTP库发送异步请求。

  3. 在请求成功的回调函数中，将返回的数据赋值给departmentTree属性。

  4. 在模板中使用v-for指令遍历departmentTree数组，展示一级部门数据。

  5. 为每个一级部门添加一个点击事件处理程序，当点击一级部门时，发送请求获取该部门的子部门数据。

  6. 在点击事件处理程序中，根据点击的一级部门的ID发送请求获取该部门的子部门数据。

  7. 在请求成功的回调函数中，将返回的子部门数据合并到点击的一级部门的数据中。

  8. 在模板中使用v-if指令判断一级部门是否有子部门数据，如果有，则展示子部门数据。

通过以上步骤，你可以实现在移动端上显示部门树组件，并实现按需加载子部门数据的功能。这样可以避免一次性加载所有数据，提高性能和用户体验。

请注意，以上步骤只是一个大致的指导，具体实现可能需要根据你的项目结构和接口返回的数据格式进行调整。另外，你可能需要根据实际情况处理错误和异常情况，并添加加载动画或提示信息来提升用户体验。

试试，以下是一个示例的Vue 2.0代码，用于加载部门树组件并根据父ID查询子组数据：

<template>
  <div>
    <ul>
      <li v-for="department in departments" :key="department.id">
        {{ department.name }}
        <button @click="loadChildren(department.id)">加载子组</button>
        <ul v-if="department.children">
          <li v-for="child in department.children" :key="child.id">
            {{ child.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      departments: [],
    };
  },
  methods: {
    loadChildren(parentId) {
      // 根据父ID查询子组数据的逻辑，这里使用模拟数据
      const children = this.getMockData(parentId);
      this.departments.forEach((department) => {
        if (department.id === parentId) {
          department.children = children;
        }
      });
    },
    getMockData(parentId) {
      // 模拟根据父ID查询子组数据的方法
      // 这里只是一个示例，实际情况下可以通过接口请求获取数据
      const data = [
        { id: 1, name: '子组1', parentId: parentId },
        { id: 2, name: '子组2', parentId: parentId },
        { id: 3, name: '子组3', parentId: parentId },
      ];
      return data.filter((item) => item.parentId === parentId);
    },
  },
  mounted() {
    // 初始化加载父ID为0的数据
    this.loadChildren(0);
  },
};
</script>

上述代码是一个使用Vue 2.0实现的部门树组件，根据父ID查询子组数据的逻辑如下：

  1. 在data中定义了departments数组，用于存储部门数据。
  2. 在loadChildren方法中，根据传入的父ID查询子组数据，并将子组数据存储到对应的父组中。
  3. getMockData方法用于模拟根据父ID查询子组数据的过程，这里只是一个示例，实际情况下可以通过接口请求获取数据。
  4. 在模板中使用v-for指令遍历departments数组，显示每个部门的名称，并为每个部门添加一个"加载子组"的按钮。
  5. 当点击"加载子组"按钮时，调用loadChildren方法加载对应部门的子组数据，并在模板中使用v-if指令判断是否显示子组数据。

在组件的mounted钩子函数中，初始化加载父ID为0的数据，即调用loadChildren(0)方法加载顶级部门的子组数据。