当前位置：首页 > news >正文

如何使用 vxe-table 实现右键菜单异步权限控制

news 2025/11/11 10:05:12

如何使用 vxe-table 实现右键菜单异步权限控制，根据后端返回是数据结果来判断按钮选项是否禁用及是否显示。
使用 visibleMethod 在菜单显示时，可以精确到每一列每一行的显示隐藏与禁用控制，非常灵活，不过是同步还是异步都支持

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

效果

请添加图片描述

代码

右键菜单加载中，通过 visibleMethod 和 loading | disabled | visible 属性来控制菜单选项的异步禁用与是否显示

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'const gridOptions = reactive({border: true,showFooter: true,height: 400,rowConfig: {isCurrent: true},columnConfig: {resizable: true},columns: [{ field: 'checkbox', type: 'checkbox', width: 50 },{ type: 'seq', width: 70 },{ field: 'name', title: 'Name' },{ field: 'nickname', title: 'Nickname' },{ field: 'age', title: 'Age' },{ field: 'role', title: 'Role' },{ field: 'address', title: 'Address' }],data: [{ id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },{ id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },{ id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },{ id: 10006, name: 'Test6', nickname: 'T6', role: 'PM', sex: 'Women', age: 57, address: 'Guangzhou' },{ id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 39, address: 'Shenzhen' },{ id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 45, address: 'Guangzhou' }],menuConfig: {header: {options: [[{ code: 'exportAll', name: '导出所有.csv', prefixConfig: { icon: 'vxe-icon-download' }, visible: true, loading: false, disabled: false }]]},body: {options: [[{ code: 'copy', name: '复制内容（Ctrl+C）', prefixConfig: { icon: 'vxe-icon-copy' }, visible: true, loading: false, disabled: false },{ code: 'clear', name: '清除内容', visible: true, loading: false, disabled: false },{ code: 'reload', name: '刷新表格', visible: true, loading: false, disabled: false }],[{ code: 'myPrint', name: '打印（Ctrl+P）', prefixConfig: { icon: 'vxe-icon-print' }, visible: true, loading: false, disabled: false },{ code: 'myExport', name: '导出.csv', prefixConfig: { icon: 'vxe-icon-download' }, visible: true, loading: false, disabled: false }]]},footer: {options: [[{ code: 'exportAll', name: '导出所有.csv', prefixConfig: { icon: 'vxe-icon-download' }, visible: true, loading: false, disabled: false }]]},visibleMethod ({ options, row }) {options.forEach(list => {list.forEach(item => {if (item.code === 'copy') {// 模拟后端接口item.loading = trueitem.disabled = truesetTimeout(() => {item.loading = falseitem.disabled = row && ['Test3', 'Test4'].includes(row.name)}, 400)}if (item.code === 'clear') {// 模拟后端接口item.loading = trueitem.visible = truesetTimeout(() => {item.loading = falseitem.visible = row && ['Test2', 'Test3'].includes(row.name)}, 800)}})})return true}},footerData: [{ checkbox: '合计', age: 135 }]
})
</script>