動的に生成されたアイデア
1.ラベルをトラバースしてナビゲーションバーを生成します
。2。ナビゲーションバー自体の再帰呼び出しを形成します。
1.ループトラバーサル生成の方法
- 最初に対応するセカンダリメニューがあるかどうかを判断し、次に対応するサイクルを実行します
<el-menu class="first-navigation"
:default-active="this.$route.path"
router
mode="horizontal"
@select="handleSelect" >
<el-submenu v-for="item in nav" :key="item.menuName" v-if="item.children" :index="item.code">
<template slot="title">{
{ item.menuName }}</template>
<el-menu-item
v-for="children in item.children" :
key="children.menuName"
:index="children.code"
>{
{ children.menuName }}</el-menu-item>
</el-submenu>
<el-menu-item v-for="item in nav" :key="item.menuName" v-if="!item.children" :index="item.code">
{
{ item.menuName }}</el-menu-item>
</el-menu>
短所：マルチレベルのナビゲーションを実現できない、第1レベルのメニューを並べ替えることができない
これはセカンダリメニューを実装する最も簡単な方法であるため、アプリケーションの範囲も小さくなります
- divまたはテンプレートタグを使用してループする外層に含め、v-ifを使用して子が含まれているかどうかを判断し、対応するタグを実行します
<el-menu class="first-navigation"
:default-active="this.$route.path" r
outer
mode="horizontal"
@select="handleSelect" >
<div class="navigation-title" v-for="item in nav" :key="item.menuName">
<el-submenu v-if="item.children" :index="item.code">
<template slot="title">{
{ item.menuName }}</template>
<el-menu-item
v-for="children in item.children" :
key="children.menuName"
:index="children.code"
>{
{ children.menuName }}</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="item.code">{
{ item.menuName }}</el-menu-item>
</div>
</el-menu>
短所：マルチレベルのナビゲーションバーを実現できない（またはコードが冗長で不確実になる）
階層の少ないナビゲーションバーに適しています
2.再帰的方法でナビゲーションバーを生成します（ハイライト!!!）
動的で柔軟なナビゲーションバーを実現するには、ナビゲーションバー自体を並べ替える必要があり、レベルはすべて制御および調整可能であるため、上記のナビゲーションバーの実装はまだ十分に柔軟で動的ではありません。
- 再帰生成も非常に簡単です！！
コア：二次包装ナビゲーションバー
最初にel-menuに書き込む
<template>
<div v-if="item.children">
<template v-if="item.children.length == 0">
<el-menu-item :index="item.path">
{
{item.title}}
</el-menu-item>
</template>
<el-submenu v-else :index="item.path">
<template slot="title" >
{
{item.title}}
</template>
<template v-for="child in item.children">
<navigation-item v-if="child.children&&child.children.length>0"
:item="child"
:key="child.path"/>
<el-menu-item v-else :key="child.path" :index="child.path">
{
{child.title}}
</el-menu-item>
</template>
</el-submenu>
</div>
</template>
<script>
export default {
name: 'navigationItem',
props: {
item: {
type: Object,
required: true
}
}
}
</script>
el-menuをカプセル化する
使用するときにこのコンポーネントを呼び出します
<template>
<div class="first-navigation">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
router
mode="horizontal"
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF">
<navigation-item v-for="menu in menuList" :key="menu.path" :item="menu" />
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import navigationItem from './navigationItem
export default {
name:'navigation',
components: { navigationItem},
props:{
menuList: {
type: Array,
required: true
}
}
}
</script>
</script>
電話するとき
<template>
<navigation :menuList="navList"/>
</template>
<script>
import navigation from './navigation.vue'
export default {
name: 'app',
components: { navigation},
data() {
return {
navList:"",
}
}
}
</script>
記事の最後の福祉
Element-uiの非表示コントロール-スクロールバーのスタイルを変更するためのel-scrollbar
まだスクロールバースタイルに巻き込まれているのは醜く、部分的な変更はあまり便利ではありません。テキストが範囲外の場合は、「overflow：scroll;」という文を追加します。しかし、その広くて古いスタイルを見ると、文句を言うのに耐えられません。
これで、必要な場所に文を追加するだけで済みます。
使用する場合は、外側のコンテナの高さを設定し、elスクロールバーの高さを100％に設定する必要があります。
例：
<el-scrollbar style="height:100%">
スクロールバーの使い方は、自分でバイドゥできますo（*≧▽≦）ツ〜┴┴