最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue3 Element-plus el-menu無限級菜單組件封裝過程

 更新時間：2023年04月26日 11:25:30   作者：奧特曼  
對于element中提供給我們的el-menu組件最多可以實現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無限級菜單組件封裝,需要的朋友可以參考下

對于element中提供給我們的el-menu組件最多可以實現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進行封裝

效果圖

 一、定義數(shù)據(jù)

MenuData.ts

export default [
    {
        id: "1",
        name: "第一級菜單",
        level: '1',
        child: [
            {
                id: "11",
                name: "第二級菜單",
                level: '1-1',
                child: [
                    {
                        id: "111",
                        name: "第三級菜單",
                        level: '1-1-1',
                        child: [
                            {
                                id: "1111",
                                name: "第四級菜單",
                                level: '1-1-1-1',
                                child: [
                                    {
                                        id: "11111",
                                        name: "第五級菜單",
                                        level: '1-1-1-1-1',
                                        child: []
                                    }
                                ]
                            }
                        ]
                    }]
            }
        ]
    },
    {
        id: "2",
        name: "第一級同級菜單",
        level: '2',
        child: []
    }
 
]

二、封裝組件 

封裝思想：

 1.對本身組件進行循環(huán)使用，如果有子集使用本身組件 把child數(shù)據(jù)傳給自己

 2.如果沒有子集 使用 el-menu-item

以下代碼對setup( )函數(shù)和setup語法糖分別做了實現(xiàn) 

setup語法糖

<template>
  <el-menu
    :default-active="defaultActive"
    :unique-opened="true"
    class="el-menu-vertical-demo"
  >
    <template v-for="item in menu">
      <!-- 如果有子集 -->
      <template v-if="item.child && item.child.length > 0">
        <el-sub-menu
          :key="item.id"
          :index="item.level"
          :disabled="item.meta?.disabled"
          :popper-append-to-body="false"
        >
          <template #title>
            <i :class="[item.meta?.icon]"></i>
            <!-- 添加空格 表示下級-->
            <span> {{ generateSpaces(item.level) }} </span>
            <span slot="title"> {{ item.name }}</span>
          </template>
          <MenuTree
            :menu="item.child"
            :defaultActive="defaultActive"
            @clickItem="clickItemHandle"
          />
        </el-sub-menu>
      </template>
      <!-- 如果沒有子集 -->
      <template v-else>
        <el-menu-item
          :key="item.id"
          :index="item.level"
          :disabled="item.meta?.disabled"
          :popper-append-to-body="false"
          @click="clickItemHandle(item)"
        >
          <i :class="[item.meta?.icon]"></i>
          <!-- 添加空格 表示下級-->
          <span> {{ generateSpaces(item.level) }} </span>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
 
<script lang="ts" name="MenuTree" setup>
// 把下面代碼變成setup語法糖的形式 
import type { PropType } from "vue";
import type { MenuItem } from "@/types/lesson";
// type 為了方便寫成這樣 可以根據(jù)自己項目設(shè)定type
 defineProps({
  menu: {
    type: Array as unknown as PropType<any[]>,
    required: true,
    default: () => [],
  },
  defaultActive: {
    type: String as unknown as PropType<string>,
    required: true,
    default: [],
  },
});
 
const emit = defineEmits(["update-active-path", "clickItem"]);
 
// 返回的空格字符串 用于顯示菜單層級 
const generateSpaces = (level: string) => {
  let str = "";
  level.split("")  .filter((it) => it != "-") .forEach(() => {
      str += "　";
  });
  return str;
};
 
// 點擊當前菜單項
const clickItemHandle = (item: MenuItem) => {
  emit("clickItem", item);
};
</script>
 
<style scoped lang="less">
.el-menu {
  width: 288px;
}
</style>

setup函數(shù)

<template>
  <el-menu :default-active="defaultActive"  :unique-opened="true"   class="el-menu-vertical-demo"  >
    <template v-for="item in menu">
        <template v-if="item.child && item.child.length > 0">
          <el-sub-menu 
            :key="item.id"
            :index="item.level"
            :disabled="item.meta?.disabled"
            :popper-append-to-body="false"
          >
            <template #title>
              <i :class="[item.meta?.icon]"></i>
              <!-- 添加空格 表示下級-->
              <span> {{ generateSpaces(item.level) }} </span>
              <span slot="title"> {{ item.name }}</span>
            </template>
            <MenuTree :menu="item.child" :defaultActive="defaultActive"  @clickItem="clickItemHandle"  />
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item 
            :key="item.id"
            :index="item.level"
            :disabled="item.meta?.disabled"
            :popper-append-to-body="false"
            @click="clickItemHandle(item)"
          >
            <i :class="[item.meta?.icon]"></i>
            <!-- 添加空格 表示下級-->
            <span> {{ generateSpaces(item.level) }} </span>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
  </el-menu>
</template>
 
<script lang="ts">
import { defineComponent, toRefs } from 'vue';
import type { PropType } from 'vue'
import type {MenuItem} from '@/types/lesson'
export default defineComponent({
  name: 'MenuTree',
  props: {
    menu: {
      type: Array as unknown as PropType<any[]>,
      required: true,
      default: () => [],
    },
    defaultActive: {
      type: String as unknown as PropType<string>,
      required: true,
      default: '',
    },
  },
  emits: ['update-active-path','clickItem'],
  setup(props, context) {
    const { menu, defaultActive } = toRefs(props);
 
    const generateSpaces = (level:string) => {
      let str = ''
      level.split('').filter(it=>it!='-').forEach(() => {
        str += '　'
      })
      return str
    }
 
    const clickItemHandle = (item:MenuItem) => {
      context.emit('clickItem', item)
    }
 
   
    return {
      clickItemHandle,
      menu,
      defaultActive,
      generateSpaces,
    }
  },
});
</script>
 
<style scoped lang="less">
  .el-menu {
    width: 288px;
  }
</style>

 type就不補充了 可根據(jù)自己項目定義，可臨時改成any

三、使用組件

<template>
 <MenuTree
        :menu="menuList"
        :defaultActive="defaultActive"
        @clickItem="handleMenuClick"
        :update-click="handleMenuClick"
      />
</template>
 
<script setup lang="ts">
import MenuTree from "./components/MenuTree.vue";
import type {MenuItem} from '@/types/lesson'
import menuData from './MenuData'
 
const defaultActive = ref<string>(''); // "1-1-1-1" 默認選中的數(shù)據(jù)
const menuList = ref(menuData)
 
const handleMenuClick = (item:MenuItem) => {
  console.log('父組件',item);
};
</script>

補充default-active變量，如果一開始想默認點開第一層的數(shù)據(jù) 就需要找規(guī)律啦

拿到所有的level，通過接口方式返給你 自己平鋪拿到所有的level也好 

例如數(shù)據(jù)格式:

let arr = [  "1-1",
  "1-1-1",
  "1-1-1-1",
  "1-1-1-2",
  "1-1-1-3",
  "1-1-1-4",
  "1-1-1-5",
  "1-1-1-6",
  "1-1-2",
  "1-1-2-1"
]

 想要的結(jié)果就是 最長且相同數(shù)字最多的元素 1-1-1-1

arr.sort((a,b)=> b.split('-').length - a.split('-').length)[0]

使用split防止有些字符串是10、11 兩位數(shù)字的

到此這篇關(guān)于Vue3 Element-plus el-menu無限級菜單組件封裝的文章就介紹到這了,更多相關(guān)Vue3 Element-plus el-menu內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 詳解vue-cli構(gòu)建項目反向代理配置

    詳解vue-cli構(gòu)建項目反向代理配置

    本篇文章主要介紹了詳解vue-cli構(gòu)建項目反向代理配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue實現(xiàn)表格合并功能

    vue實現(xiàn)表格合并功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)表格合并功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-12-12
  • Vue3中其他的Composition?API詳解

    Vue3中其他的Composition?API詳解

    這篇文章主要介紹了Vue3中其他的Composition?API,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-03-03
  • 使用Vue與WebSocket創(chuàng)建實時通知系統(tǒng)

    使用Vue與WebSocket創(chuàng)建實時通知系統(tǒng)

    在現(xiàn)代應用開發(fā)中,實時性已成為用戶體驗的一個重要組成部分,ue 作為一款流行的前端框架,配合 WebSocket,可以輕松構(gòu)建實時通知系統(tǒng),在本文中,我們將通過一個簡單的示例,使用 Vue 3 的 Composition API（setup 語法糖）來創(chuàng)建一個實時通知系統(tǒng)
    2024-11-11
  • 簡單了解Vue computed屬性及watch區(qū)別

    簡單了解Vue computed屬性及watch區(qū)別

    這篇文章主要介紹了通過實例解析Vue computed屬性及watch區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-07-07
  • vue3常用的API使用簡介

    vue3常用的API使用簡介

    這篇文章主要介紹了vue3常用的API使用簡介，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下
    2021-03-03
  • vue.js基于ElementUI封裝了CRUD的彈框組件

    vue.js基于ElementUI封裝了CRUD的彈框組件

    這篇文章主要介紹了vue.js基于ElementUI封裝了CRUD的彈框組件，問咋會給你圍繞主題展開詳細的內(nèi)容介紹，感興趣的小伙伴可以參考一下
    2022-07-07
  • Vue退出登錄時清空緩存的實現(xiàn)

    Vue退出登錄時清空緩存的實現(xiàn)

    今天小編就為大家分享一篇Vue退出登錄時清空緩存的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue使用leafLet方式(繪圖工具)

    vue使用leafLet方式(繪圖工具)

    這篇文章主要介紹了vue使用leafLet方式(繪圖工具),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • vue組件style中scoped的作用及說明

    vue組件style中scoped的作用及說明

    這篇文章主要介紹了vue組件style中scoped的作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-09-09

最新評論

前郭尔| 顺平县| 潞西市| 盐边县| 禹城市| 章丘市| 安庆市| 汉阴县| 启东市| 德保县| 霍城县| 安乡县| 伊吾县| 多伦县| 沂水县| 金平| 丹江口市| 嘉荫县| 太康县| 广西| 宿松县| 枣阳市| 娱乐| 金山区| 林甸县| 得荣县| 黔西县| 南江县| 江安县| 揭阳市| 佛教| 玉屏| 黄大仙区| 澎湖县| 咸阳市| 南华县| 额济纳旗| 南开区| 白水县| 大冶市| 静乐县|