話不多說 直接上代碼?

主要是給h函數設置自定義指令控制

import '@/styles/reset.css'
import '@/styles/global.scss'
import 'uno.css'import { createApp } from 'vue'
import App from './App.vue'
import { setupRouter } from './router'
import { setupStore } from './store'
import { setupNaiveDiscreteApi } from './utils'
import { setupDirectives } from './directives'
import { permissions } from './globalVariables'async function bootstrap() {const app = createApp(App)// 注冊全局變量  添加permissions權限app.config.globalProperties.$permissions = permissionssetupStore(app)setupDirectives(app)await setupRouter(app)app.mount('#app')setupNaiveDiscreteApi()
}bootstrap()

---

import { router } from '@/router'const permission = {mounted(el, binding) {//拿到當前的route信息const currentRoute = unref(router.currentRoute)去取按鈕權限集合const btns = currentRoute.meta?.btns?.map(item => item.code) || []//判斷當前是否存在if (!btns.includes(binding.value)) {el.remove()}},
}export function setupDirectives(app) {//注冊自定義指令app.directive('permission', permission)
}

---

//resolveDirective 獲取當前已經注冊過的自定義指令
//withDirectives vue3提供給虛擬dom添加自定義指令的函數
//getCurrentInstance 獲取上下文
import { resolveDirective, withDirectives } from 'vue'// 獲取 按鈕權限 
const permissions = getCurrentInstance()?.appContext.config.globalProperties.$permissions
//獲取resolveDirective當前已經注冊的指令名 也就是v-xxxx
const permissionDirective = resolveDirective('permission'){title: '操作',key: 'actions',align: 'center',width: 100,fixed: 'right',render: (row) => {return [withDirectives(h(NButton,{size: 'small',type: 'primary',secondary: true,onClick: () => handleAddOrEdit('edit', row),},{ default: () => '修改' },),// 添加權限控制[[permissionDirective, permissions.editNotification]],),//交集設置h是否展示row.xxx === 2 && withDirectives(h(NButton,{size: 'small',type: 'error',style: 'margin-left: 12px;',secondary: true,onClick: () => handleDeleteRow(row),},{ default: () => '刪除' },),[[permissionDirective, permissions.delNotification]],),]},},

針對需要判斷狀態的時候

把他們放在同一級

row.state !== 2 && withDirectives(h(NButton,{size: 'small',type: row.state === 0 ? 'error' : 'warning',style: 'margin-left: 12px;',secondary: true,onClick: () => handlemore('6', row),},{ default: () => row.state === 0 ? '凍結' : '解凍' },),[[permissionDirective, permissions.frozenUser]],),

---