javascript - uniapp如何根据这样的数据结构封装一个树形控件？

Question

data:{

depts:[
    {    
        depts:[
            {    
                depts:[]
                users:[]
            }
        ]
        users:[]
    },
    {    
        depts:[
            {
                depts:[]
                users:[]
            }
        ]
        users:[]
    }
]
users:[]

}

Answer 1

<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>