哪位大佬可以详细讲解下，uniapp封装树形控件的思想？

Question

哪位大佬可以详细讲解下，uniapp封装树形控件的思想？

Answer 1

本质就是递归，自己调用自己，你懂js的递归就行了

<template>
  <view class="dept">
    <view class="dept-name">{{ dept.name }}</view>
    <view class="users">
      <view class="user" v-for="user in dept.users" :key="user.id">
        {{ user.name }}
      </view>
    </view>
    <view class="sub-depts">
      <dept v-for="subDept in dept.depts" :key="subDept.id" :dept="subDept" />
    </view>
  </view>
</template>
<script>
export default {
  name: 'dept',
  props: {
    dept: Object
  },
  components: {
    'dept': () => import('./Dept.vue')  // 递归引用自身
  }
}
</script>

然后：

<template>
  <view class="tree">
    <dept v-for="dept in data.depts" :key="dept.id" :dept="dept" />
  </view>
</template>

<script>
import Dept from './Dept.vue'

export default {
  components: {
    Dept
  },
  data() {
    return {
      data: {
        depts: [
          // 你的数据
        ]
      }
    }
  }
}
</script>