Vue怎么结合Element-Plus封装递归组件实现目录

这篇“Vue怎么结合Element-Plus封装递归组件实现目录”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue怎么结合Element-Plus封装递归组件实现目录”文章吧。

前言

如下。

没错，递归组件可以解决我这个困惑，递归无非就是自己调用自己，我们编写好合理的组件渲染逻辑之后，在组件内部自己调用自己，这就是递归组件，接下来请看我的解决步骤吧！

用正则匹配出所有的h标签并且保存在数组中

//这里的str是用markdownIt解析生成的html字符串  const menu = [...str.matchAll(/<h.*>.*</h.>/g)]

效果如下

封装函数，将数组中的内容变成父子结构

//我的每个菜单的类型class menuItem {  title: string  children?: menuItem[]  type: number   //type为1表示是h2标签  index: number    //index表示是type对应的第几个h标签  constructor(    title: string,    type: number,    index: number,    children: menuItem[] = []  ) {    this.title = title    this.children = children    this.type = type    this.index = index  }}export default function (menu: any[]): any[] {  //保存所有h min标签  const arr: menuItem[] = []  const arrIndex: number[] = new Array(7).fill(0)  // 用于保存前一个层的结点。例如我当前遍历的是type=3的item，那么我需要知道它所属于哪个type=2的item  // 如果有就添加到它的children中，如果没有就添加到pre[3]中  const pre = new Array(7).fill(null)  //记录h min是哪个标签（例如h2）  let minType = null  for (const item of menu) {    const content = item[0]    const type = parseInt(content[2])    const title = content.split(/<\/?h.>/)[1]    const menuitem = new menuItem(title, type, arrIndex[type]++)    //判断当前type-1项有没有内容，有的话就加入到前一个种类的children中去    if (pre[type - 1]) {      pre[type - 1].children.push(menuitem)    }    //重置当前type的项    pre[type] = menuitem    minType = minType ?? type    //如果是最小的h标签，就插入    if (type === minType) {      arr.push(menuitem)    }  }  return arr}

转换的arr结果如下，可以看到，数组中保存了两个顶层目录，children保存了内部的子目录。

封装递归组件fold-item（在使用之前不要忘了导入自己哦）

<script lang="ts" setup>import foldItem from './foldItem.vue'   //导入自己defineProps({  item: {    type: Object,    default: () => ({})  }})</script><template>  <!--  如果有孩子，就渲染成sub-menu（折叠item）-->  <template v-if="item.children.length">    <el-sub-menu :index="item.title">      <template #title>        <div class="title" v-html="item.title"></div>      </template>      <fold-item        v-for="i in item.children"        :key="i.title"        :item="i"      ></fold-item>    </el-sub-menu>  </template>  <!--  否则就渲染成menu-item-->  <template v-else>    <el-menu-item :index="item.title" @click="scrollToItem(item)">      <template #title>        <div class="title" v-html="item.title"></div>      </template>    </el-menu-item>  </template></template><style lang="less" scoped>.title {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}::v-deep.el-menu-item {  width: 220px;  line-height: 30px;  height: 30px;}::v-deep.el-sub-menu {  width: 220px;}::v-deep .el-sub-menu__title {  height: 30px;  line-height: 30px;}</style>

在foldMenu中使用递归组件

<script lang="ts" setup>import foldItem from './foldItem.vue'defineProps({  menu: {    type: Array,    default: () => []  }})</script><template>  <div class="menu-title">目录</div>  <el-menu>  <!-- 使用递归组件 -->    <fold-item v-for="item in menu" :key="item.title" :item="item"></fold-item>  </el-menu></template><style lang="less" scoped>::v-deep.el-menu {  border: none;}.menu-title {  text-align: center;  margin-bottom: 10px;}</style>

使用效果

更复杂的目录结构也能胜任

以上就是关于“Vue怎么结合Element-Plus封装递归组件实现目录”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。