<template>
  <van-collapse v-model="activeNames">
    <van-collapse-item :title="item.name" :name="item.id" v-for="item in data" :key="item.id">
      <ul>
        <li v-for="subItem in item.children" :key="subItem.id">{{subItem.name}}</li>
      </ul>
    </van-collapse-item>
  </van-collapse>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeNames: []
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-cell {
  padding-left: 0;
  padding-right: 0;
}
::v-deep .van-collapse-item__content {
  padding: 0;
}
::v-deep .van-collapse-item--border::after {
  left: 0;
  right: 0;
}
::v-deep .van-collapse-item__title--expanded::after {
  display: none;
}
li {
  padding: 10px 0;
}
</style>
