menduner/src/components/areaTree/recursive.vue

<template>
  <div>
    <span class="mr-5" v-if="currentRowType > 2">不限</span>
    <span v-for="(item, index) in props.items" :key="item.id">
      <span v-if="index < 15" class="mr-5" @click="handleClick(item)">{{ item.name }}</span>
    </span>
    <span v-if="props.items?.length >= 15" @click="handleClick(props.items, 'other')">其他</span>
    <recursive v-if="children" :items="children"></recursive>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import recursive from './recursive'
defineOptions({ name:'common-components-areaTree-recursive'})

const props = defineProps({items: Object})
let children = ref('')
let currentRowType = ref(0)
if (props.items && props.items.length) {
  const item = props.items[0] // 首个子级
  currentRowType.value = item.type - 0 // 当前块级数据type
  if (currentRowType.value < 2 && item.children && item.children.length) { // 展开子级(暂时默认展示到国家级)
    children.value = item.children
  }
}

const handleClick = (item, btnType) => {
  console.log(btnType, 'item', item)
  if (btnType === 'other') {
    return
  } else {
    if ((item.type - 0) === 1) children.value = item.children // 国家级
    else if ((item.type - 0) > 1) { // 省级
      children.value = item.children
    }
    console.log('children', children)
  }
}

</script>