微信小程序组件 - 部门机构人员岗位树组件

<template>
  <ul class="dept-tree-list">
    <li v-for="(department, index) in departments" :key="index">
      {{ department.name }}
        <small>{{ department.position }}</small>
      <div class="employee-list">
        <ul>
          <li v-for="(employee, index) in department.employees" :key="index">
            {{ employee.name }}
            <small>{{ employee.position }}</small>
          </li>
        </ul>
      </div>
      <DepartmentTree :departments=department.subDepartments></DepartmentTree>
    </li>
  </ul>
</template>

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

<style scoped>
.dept-tree-list{
  padding-left: 20px;
}
.employee-list{
  margin-left: 20px;
}
</style>

这是一个嵌套的部门机构人员岗位树组件，基于Vue框架。它可以根据传入的数组数据生成对应的树状结构。

使用方法：

在父组件中导入和注册该组件。 给子组件传入 departments 数组作为 props ，其中每个元素应包含以下属性: name:
部门/员工姓名（必须）。 position: 岗位名称（可选）。 employees: 包含员工信息的数组（可选）。
subDepartments: 子部门信息，也是一个 departments 类型的数组（可选）。 在父组件中需要使用该组件的地方，使用
进行引用即可。
该组件生成的树状结构样式如下：

部门A

​ 小A1（员工）

​ 岗位A1

​ 小A2（员工）

​ 岗位A2

​ …

​ 子部门A1

​ …

​ 子部门A2