go 递归tree关系_vue 递归组件之树形 tree通讯录 的简单封装-Go语言中文社区

最近， 做一个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 为顶级部门信息

有几个点要注意：

递归组件不能有自启动的方法，这会导致组件一直递归，没有出口，

组件里的点击要通过父子组件消息传递