<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
