1:在public.js檔案封裝公共方法：

let TF = {
  btnList(name, index) {//name 按鈕名稱 index 頁面存在多個重複按鈕時新增index v-has="$TF.btnList('新增',2)"
        let arr = [
            { id: 'addBtn', name: '新增' },
            { id: 'editBtn', name: '編輯' },
            { id: 'delBtn', name: '刪除' },
            { id: 'importBtn', name: '匯入' },
            { id: 'exportBtn', name: '匯出' },
            { id: 'copyBtn', name: '複製' },
            { id: 'batchImportBtn', name: '批量匯入' },
            { id: 'batchExportBtn', name: '批量匯出' },
            { id: 'batchAddBtn', name: '批量新增' },
            { id: 'batchDelBtn', name: '批量刪除' },
            { id: 'batchCopyBtn', name: '批量複製' },
            { id: 'templateDownloadBtn', name: '模板下載' }
        ]
        let btn = arr.find((item) => { if (item.name == name) { return item } })
        let btnTab = ''
        if (btn) {
            btnTab = btn.id
            if (index) {
                btnTab = btnTab + index
            }
        }
        return btnTab
    }
}
export default TF
 

2：在main.js中全域性引用

import TF from './utils/public'
import './utils/directives' 
import './utils/btnDirectives' 
Vue.prototype.$TF = TF;

3：btnDirectives.js檔案：（前端控制權限隱藏按鈕 vue自定義指令v-has）

import Vue from 'vue'
import router from '../router/index'
//從儲存器拿出已經存好的公共選單資料，來查詢是否存在顯隱判斷標識。詳細見最後拓展解釋說明。
Vue.directive('has', {
    bind: function (el, binding) {   
        var index = router.app.$route.meta.btnTags.findIndex((item) => item.tag === binding.value) 
        if (index == -1) {
            el.style.display = 'none'
        } 
    }
})
 

4：在頁面中引用,例如新增，編輯刪除

 <el-button v-has="$TF.btnList('新增')" type="primary" icon="el-icon-circle-plus-outline" size="small" @click="onAdd">新增</el-button>
//當頁面出現第二個新增按鈕時候：
 <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="onAddItem" v-has="$TF.btnList('新增',2)">新增專案</el-button>
<el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-has="$TF.btnList('編輯')" @click="openForm(scope.row)" type="text" size="small">編輯</el-button>
            <el-button v-has="$TF.btnList('刪除')" @click='handleDeleteClick(scope.row)' type="text" size="small">刪除</el-button>
          </template>
</el-table-column>

 

針對第三點拓展說明：
資料結構跟後臺協商，路由選單顯示三級，第一級：父級主選單。第二級：每個頁面選單名稱。第三級：該頁面下包含按鈕名稱資訊