最近, 做一个h5项目遇到了需要在一个通讯录的接口中选人的界面的需求,大概就是下面这样
接口数据时这样的格式
{
'code': 200,
'data': {
'dept': [{
'deptcode': '120100000000',
'deptname': '所有部门'
}],
'user': [{
'UUID': '02c760d9-6295-4453-94ed-4642e369dfaa',
'deptcode': '99',
'deptname': '所有部门',
'name': '用户1'
}, {
'UUID': 'c64c64a9-ab34-43b4-94e2-5689aeeb51e8',
'deptcode': '99',
'deptname': '所有部门',
'name': '用户2'
}]
}
}
大致在描述下, 后台有数据接口为 返回部门直系人员以及子部门的list,界面实现,点击部门展开当前部门的用户和子部门,点击人员选中的操作
废话不多说,这里肯定需要一个递归组件来实现,因为鬼知道你的部门深度时多少 ,组件代码结果如下
组件template
<template>
<div class="contact_body">
<div class="depet" @click="getDeptAndUserList">
<img src="../../../../assets/img/firecontrol/dept.png">
<span>{{ dept.deptname }}</span>
</div>
<div v-if="userList.length !== 0" class="user_list">
<div v-for="item in userList" :key="item.UUID" class="depet" @click="userClick(item)">
<img src="../../../../assets/img/firecontrol/tx.png">
<span>{{ item.name }}</span>
</div>
</div>
<div v-if="deptList.length !== 0">
<ContactTree v-for="item in deptList" :key="item.deptcode" :dept="item" @userClick="userClick" />
</div>
</div>
</template>
组件scirpt
<script>
import api from '@/api/index'
export default {
name: 'ContactTree',
props: {
dept: {
type: Object,
default: null
}
},
data() {
return {
userList: [],
deptList: []
}
},
methods: {
userClick(data) {
this.$emit('userClick', data)
},
getDeptAndUserList() {
let params = {
accessToken: this.$store.getters.token
}
params.deptcode = this.dept.deptcode
api.getdeptuser(params).then(res => {
this.userList = res.data.user
this.deptList = res.data.dept
})
}
}
}
</script>
使用
<Contact :data="data" @editClose="contactClose"></Contact>
contactClose 方法为通讯录选人的回调, data 为顶级部门信息
有几个点要注意:
- 递归组件不能有自启动的方法,这会导致组件一直递归,没有出口,
- 组件里的点击要通过父子组件消息传递