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/zh-hant/n/147877.html