Vue3+elementPlus组件递归

下面以实现导航菜单为例

1、父页面：

<template>
  <div class="vuecontainer">
    <!--  导航-->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#1874cd"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <template v-for="(item, i) in idxTree" :key="i">
        <IdxNav :list="item"></IdxNav>
      </template>
    </el-menu>
</template>
<script setup lang="ts">
import {ref, reactive, onMounted, nextTick} from 'vue'
import IdxNav from './idxNav'


const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[], item: Object) => {
  // do Something
}

const idxTree = ref([
  {
    "id": "11111111111111111111111111111111",
    "name": "一级菜单",
    "label": "一级菜单",
    "parentId": "999999999999999999999999999",
    "type": "0",
    "dataType": null,
    "idxRange": null,
    "children": [
      {
        "id": "22222222222222222222222222222222",
        "name": "L哈哈",
        "label": "L哈哈",
        "parentId": "11111111111111111111111111111111",
        "type": "0",
        "dataType": null,
        "idxRange": null,
        "children": [
          {
            "id": "33333333333333333",
            "name": "天数",
            "label": "天数",
            "parentId": "22222222222222222222222222222222",
            "type": "1",
            "dataType": "0",
            "idxRange": "3",
            "children": null
          },
          {
            "id": "333333333333333",
            "name": "月数",
            "label": "月数",
            "parentId": "22222222222222222222222222222222",
            "type": "1",
            "dataType": "0",
            "idxRange": "3",
            "children": null
          }
        ]
      },
      {
        "id": "384fe7a5384fe7a5384fe7a5384fe7a5",
        "name": "车站",
        "label": "车站",
        "parentId": "11111111111111111111111111111111",
        "type": "0",
        "dataType": null,
        "idxRange": null,
        "children": [
          {
            "id": "855bf0e9-aacc-40de-b05e-fa854d8135fe",
            "name": "入口数",
            "label": "入口数",
            "parentId": "384fe7a5384fe7a5384fe7a5384fe7a5",
            "type": "1",
            "dataType": "0",
            "idxRange": "3",
            "children": null
          }
        ]
      }
    ]
  }
]);
</script>

2、递归组件：

<template>
  <template v-if="list.children && list.children !=null">
    <el-sub-menu :index="list.id">
      <template #title>
        <el-icon>
          <Expand/>
        </el-icon>
        <span>{{ list.name }}</span>
      </template>
      <template v-for="(item, i) in list.children">
        <IdxNav :list="item"></IdxNav>
      </template>
    </el-sub-menu>
  </template>
  <template v-else>
    <el-menu-item :index="list.id">
      <template #title>
        <el-icon>
          <Expand/>
        </el-icon>
        <span>{{ list.name }}</span>
      </template>
    </el-menu-item>
  </template>
</template>
<script setup lang="ts">
import IdxNav from './idxNav.vue'
import {Expand, Fold} from '@element-plus/icons-vue';
import {toRefs, defineProps} from 'vue';

const props = defineProps({
  list: {
    type: Object,
    default: () => {
    }
  }
})
const {list} = toRefs(props)
</script>
<style scoped lang="scss">
[data-popper-placement=right-start] .el-menu--popup-container .el-menu--popup .el-menu-item {
  color: #606266;
}
[data-popper-placement=right-start] .el-menu--popup-container .el-menu--popup .el-menu-item.is-active {
  color: #ffd04b;
  background-color: #1874cd;
}
</style>