ElementUI右键菜单详解

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: '选项一' },
原创文章，作者：RWEL，如若转载，请注明出处：https://www.506064.com/n/147877.html