ElementUI是一款基于Vue.js 2.0的UI组件库，它提供了丰富的UI组件，其中包括右键菜单组件。本文将从多个方面对ElementUI右键菜单进行详细阐述。包括：elementui右键菜单栏拓展, elementui菜单导航, elementui tree右键菜单, elementui菜单权限, elementui单选选项卡, elementui动态菜单, elementui单选按钮, elementui路由菜单, elementui表格右键菜单。
一、elementui右键菜单栏拓展
ElementUI右键菜单栏拓展组件为基本右键菜单，可以在页面元素中添加右键菜单，例如在图片上右键弹出保存图片的选项。下面是一个简单的示例：
<template>
<div class="demo">
<p on-contextmenu="handleContextmenu">右键点击我</p>
<el-context-menu :model="menu" :ref="menuRef">
<el-menu-item>编辑</el-menu-item>
<el-menu-item divided>删除</el-menu-item>
<el-menu-item divided disabled>停用</el-menu-item>
</el-context-menu>
</div>
</template>
<script>
export default {
data() {
return {
menu: [
{
label: '编辑',
command: () => {
console.log('点击了编辑')
}
},
{
label: '删除',
command: () => {
console.log('点击了删除')
}
},
{
label: '停用',
disabled: true
}
],
menuRef: 'menu'
}
},
methods: {
handleContextmenu(e) {
e.preventDefault()
this.$refs.menu.show(e.clientX, e.clientY)
}
}
}
</script>
上述代码中，使用了el-context-menu组件，该组件被赋予了一个model属性，可以根据model属性渲染菜单内容。同时，代码还设置了command，当点击菜单项时会触发该事件。
二、elementui菜单导航
ElementUI菜单导航组件可用于创建侧边栏导航菜单，可以实现菜单的展开和折叠。下面是一个简单的示例：
<template>
<el-menu :default-active="activeIndex" mode="vertical" @select="handleSelect">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group title="分组一">
<el-menu-item index="1-1">选项一</el-menu-item>
<el-menu-item index="1-2">选项二</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组二">
<el-menu-item index="1-3">选项三</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项四</template>
<el-menu-item index="1-4-1">选项五</el-menu-item>
<el-menu-item index="1-4-2">选项六</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1-1'
}
},
methods: {
handleSelect(index) {
this.activeIndex = index
}
}
}
</script>
上述代码中，使用了el-menu以及相关的子组件el-menu-item和el-submenu。同时，也设置了default-active属性来指定默认选中的菜单项，以及@select事件回调函数来处理菜单选项的选择事件。
三、elementui tree右键菜单
Tree组件是ElementUI中展示树状结构的组件，而Tree右键菜单组件则可以为Tree组件添加右键菜单功能。下面是一个简单的示例：
<template>
<el-tree :data="data" :expand-on-click-node="false" @node-contextmenu="handleContextmenu">
<span class="custom-tree-node" slot-scope="{ node, data }">{{ node.label }}
<el-context-menu :model="menu" :ref="menuRef"></el-context-menu>
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}],
menu: [
{
label: '新增节点',
command: () => {
console.log('点击了新增节点')
}
},
{
label: '删除节点',
command: () => {
console.log('点击了删除节点')
}
}
],
menuRef: 'menu'
}
},
methods: {
handleContextmenu(e, { node, data }) {
e.preventDefault()
this.$refs.menu.show(e.clientX, e.clientY)
}
}
}
</script>
上述代码中，使用了el-tree组件以及相关的子组件el-context-menu。在el-tree组件上方设置了自定义的右键菜单组件，并且在@node-contextmenu事件回调函数中显示了该菜单组件。此外，代码中还设置了command属性，当点击菜单项时触发该事件。
四、elementui菜单权限
ElementUI菜单权限使得菜单可以动态地展现和隐藏，根据用户的权限动态控制菜单显示。下面是一个简单的示例：
<template>
<el-menu :default-active="activeIndex" mode="horizontal">
<el-menu-item index="home">首页</el-menu-item>
<el-submenu index="customer">
<template slot="title">
<i class="el-icon-menu" />
<span>客户管理</span>
</template>
<el-menu-item index="customer_list">客户列表</el-menu-item>
<el-menu-item index="customer_add">新增客户</el-menu-item>
</el-submenu>
<el-submenu index="product">
<template slot="title">
<i class="el-icon-menu" />
<span>产品管理</span>
</template>
<el-menu-item index="product_list">产品列表</el-menu-item>
<el-menu-item index="product_add">新增产品</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: 'home',
menus: ['home', 'customer', 'customer_list'] // 模拟用户权限
}
},
computed: {
getMenuList() {
return this.menus.map(menu => `/${menu}`)
}
},
watch: {
getMenuList() {
this.$nextTick(() => {
this.$forceUpdate()
})
}
}
}
</script>
上述代码中，定义了一个menus数组来模拟用户的菜单权限，当用户没有某个菜单的权限时，代码会在getMenuList计算属性中排除该菜单的index编号，从而动态地控制菜单的显隐性。使用计算属性的好处是，如果菜单权限发生改变，那么与之相关的组件会重新渲染。
五、elementui单选选项卡
ElementUI单选选项卡组件可以实现多个选项卡之间的切换。下面是一个简单的示例：
<template>
<el-tabs v-model="activeIndex">
<el-tab-pane label="选项卡一">选项卡一的内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二的内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三的内容</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeIndex: '选项卡一'
}
}
}
</script>
上述代码中，使用了el-tabs组件以及el-tab-pane组件。在el-tabs组件中设置了v-model来绑定选中的选项卡的label。
六、elementui动态菜单
ElementUI动态菜单可以根据数据动态生成菜单。下面是一个简单的示例：
<template>
<div class="demo">
<div v-for="(item, index) in menus" :key="index">
<el-submenu :index="item.id">
<template slot="title">
<i class="el-icon-location"></i>{{ item.label }}
</template>
<el-menu-item-group v-for="(subItem, subIndex) in item.children" :key="subIndex" :title="subItem.label">
<el-menu-item v-for="(childItem, childIndex) in subItem.children" :key="childIndex" :index="childItem.id">
{{ childItem.label }}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</div>
</div>
</template>
<script>
export default {
data() {
return {
menus: [
{
id: '1',
label: '菜单一',
children: [
{
label: '分组一',
children: [
{ id: '1-1', label: '选项一' },
