Element Vue 權限是一套基于 Vue.js 的權限管理組件，可在復雜的權限場景下提供方便的管理。它允許您根據用戶角色和操作權限動態地控制組件和頁面元素的渲染和操作。

下面是如何使用 Element Vue 權限的簡單示例：

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ElementPermissions from 'element-permissions'
import router from './router'
import store from './store'
Vue.use(Element)
Vue.use(ElementPermissions, {
router,
store,
roles: ['admin', 'editor'], // 定義角色
permissions: { // 定義所有頁面和組件的權限
'dashboard': {
view: ['admin', 'editor'],
edit: ['admin']
},
'user': {
view: ['admin', 'editor'],
edit: ['admin']
}
}
})

在上面的代碼中，我們首先引入了 Element UI 和 Element Vue 權限，并定義了我們的角色和頁面/組件的權限。現在我們可以在我們的 Vue 組件中使用 Element Vue 權限指令來控制頁面的渲染和操作：

<template>
<div>
<el-button v-permission="'dashboard.view'">查看Dashboard</el-button>
<el-button v-permission="'dashboard.edit'">編輯Dashboard</el-button>
<el-button v-permission="'user.view'">查看用戶列表</el-button>
<el-button v-permission="'user.edit'">編輯用戶列表</el-button>
</div>
</template>

在上面的代碼中，我們使用了v-permission指令，并傳遞了我們定義的權限名。這將自動將按鈕渲染為灰色，使其不可用或隱藏。

Element Vue 權限是一個非常方便的 Vue 組件，可以幫助您快速實現靈活的權限管理。它可以用于任何大小的 Web 應用程序，并可以定制以適應您的需求。