vue3+naiveUI数据表格中的按钮使用自定义指令

在使用naiveUI时，如果想在数据表格中绑定自定义指令来控制按钮的权限，需要使用vue3中提供的withDirectives和resolveDirective
1.在main.js中定义一个自定义指令

//按钮权限控制
app.directive('authButton', {
    // 当绑定元素挂载到 DOM 中时
    mounted(el, binding) {
        const permission = binding.value;
        let userInfo = commonStore.userInfo.permissions
        if (userInfo[0] == '*:*:*') {
        } else if (!userInfo.includes(permission)) {
            el.style.display = 'none';
        }
    }
});

2.在组件中使用`resolveDirective``引入定义好的自定义指令

import { withDirectives, resolveDirective } from 'vue'
const authButton = resolveDirective('authButton')

3.在组件中使用withDirectives来使用自定义指令

const createColumns = () => {
    return [
        {
            title: "操作",
            key: "actions",
            width: 300,
            render(row) {
                return [
                    withDirectives(h(NButton, {}, 
                    { default: () => '编辑' }), 
                    [[authButton, `${authControl.value}edit`]]),
                    withDirectives(h(NButton, {}, 
                    { default: () => '删除' }), 
                    [[authButton, `${authControl.value}remove`]]),
                    ]),
                ]
            }
        }
    ];
};