Element NavMenu导航菜单的使用方法

2025-05-29 0 81

组件—导航菜单

顶栏

Element NavMenu导航菜单的使用方法

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58
<el-menu :default-active="activeindex" class="el-menu-demo" mode="horizontal" @select="handleselect">

<el-menu-item index="1">处理中心</el-menu-item>

<el-submenu index="2">

<template slot="title">我的工作台</template>

<el-menu-item index="2-1">选项1</el-menu-item>

<el-menu-item index="2-2">选项2</el-menu-item>

<el-menu-item index="2-3">选项3</el-menu-item>

<el-submenu index="2-4">

<template slot="title">选项4</template>

<el-menu-item index="2-4-1">选项1</el-menu-item>

<el-menu-item index="2-4-2">选项2</el-menu-item>

<el-menu-item index="2-4-3">选项3</el-menu-item>

</el-submenu>

</el-submenu>

<el-menu-item index="3" disabled>消息中心</el-menu-item>

<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>

</el-menu>

<div class="line"></div>

<el-menu

:default-active="activeindex2"

class="el-menu-demo"

mode="horizontal"

@select="handleselect"

background-color="#545c64"

text-color="#fff"

active-text-color="#ffd04b">

<el-menu-item index="1">处理中心</el-menu-item>

<el-submenu index="2">

<template slot="title">我的工作台</template>

<el-menu-item index="2-1">选项1</el-menu-item>

<el-menu-item index="2-2">选项2</el-menu-item>

<el-menu-item index="2-3">选项3</el-menu-item>

<el-submenu index="2-4">

<template slot="title">选项4</template>

<el-menu-item index="2-4-1">选项1</el-menu-item>

<el-menu-item index="2-4-2">选项2</el-menu-item>

<el-menu-item index="2-4-3">选项3</el-menu-item>

</el-submenu>

</el-submenu>

<el-menu-item index="3" disabled>消息中心</el-menu-item>

<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>

</el-menu>

<script>

export default {

data() {

return {

activeindex: '1',

activeindex2: '1'

};

},

methods: {

handleselect(key, keypath) {

console.log(key, keypath);

}

}

}

</script>

侧栏

Element NavMenu导航菜单的使用方法

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96
<el-row class="tac">

<el-col :span="12">

<h5>默认颜色</h5>

<el-menu

default-active="2"

class="el-menu-vertical-demo"

@open="handleopen"

@close="handleclose">

<el-submenu index="1">

<template slot="title">

<i class="el-icon-location"></i>

<span>导航一</span>

</template>

<el-menu-item-group>

<template slot="title">分组一</template>

<el-menu-item index="1-1">选项1</el-menu-item>

<el-menu-item index="1-2">选项2</el-menu-item>

</el-menu-item-group>

<el-menu-item-group src=\"/uploads/allimg/211130/14100621J-2.jpg\" />

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61
<el-radio-group v-model="iscollapse" style="margin-bottom: 20px;">

<el-radio-button :label="false">展开</el-radio-button>

<el-radio-button :label="true">收起</el-radio-button>

</el-radio-group>

<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" :collapse="iscollapse">

<el-submenu index="1">

<template slot="title">

<i class="el-icon-location"></i>

<span slot="title">导航一</span>

</template>

<el-menu-item-group>

<span slot="title">分组一</span>

<el-menu-item index="1-1">选项1</el-menu-item>

<el-menu-item index="1-2">选项2</el-menu-item>

</el-menu-item-group>

<el-menu-item-group src=\"/uploads/allimg/211130/14100B433-3.jpg\" />

Element NavMenu导航菜单的使用方法

menu methods

Element NavMenu导航菜单的使用方法

menu events

Element NavMenu导航菜单的使用方法

submenu attribute

Element NavMenu导航菜单的使用方法

menu-item attribute

Element NavMenu导航菜单的使用方法

menu-group attribute

Element NavMenu导航菜单的使用方法

到此这篇关于element navmenu导航菜单的使用方法的文章就介绍到这了,更多相关element navmenu导航菜单内容请搜索快网idc以前的文章或继续浏览下面的相关文章希望大家以后多多支持快网idc!

原文链接:https://blog.csdn.net/GU_AO_SHI_TAI_DU/article/details/94602192

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 Element NavMenu导航菜单的使用方法 https://www.kuaiidc.com/97588.html

相关文章

发表评论
暂无评论