最近, 做一个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
{{ dept.deptname }}
{{ item.name }}
组件scirpt
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
})
}
}
}
使用
contactClose 方法为通讯录选人的回调, data 为顶级部门信息
有几个点要注意:
递归组件不能有自启动的方法,这会导致组件一直递归,没有出口,
组件里的点击要通过父子组件消息传递