vue 递归组件之树形 tree通讯录 的简单封装

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

有几个点要注意：

• 递归组件不能有自启动的方法，这会导致组件一直递归，没有出口，
• 组件里的点击要通过父子组件消息传递