企业官网建设流程全解析

在后台管理系统中，表格编辑权限的控制是一个常见需求。不同角色或不同用户可能对同一表格的不同列拥有不同的操作权限——例如，普通员工只能编辑部分字段，而管理员拥有全部编辑权限。vxe-table 提供了两种灵活的权限控制方式：列级权限控制（通过 editRender.enabled）和表级权限控制（通过 editConfig.enabled），让你可以精确管理表格的编辑权限。

列级权限控制：精准管理每一列的编辑权限

通过 editRender.enabled 属性，可以单独控制某一列的编辑功能是否启用。当 enabled: false 时，该列将变为只读状态，用户无法进入编辑模式。

核心配置

constnameEditRender=reactive({name:'VxeInput',// 编辑器类型enabled:true// 是否启用编辑（默认 true）})

代码

<template><div>name编辑：<vxe-switchv-model="nameEditRender.enabled"></vxe-switch>sex编辑：<vxe-switchv-model="sexEditRender.enabled"></vxe-switch><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constnameEditRender=reactive({name:'VxeInput',enabled:true})constsexEditRender=reactive({name:'VxeInput',enabled:true})constageEditRender=reactive({name:'VxeNumberInput',props:{type:'integer'}})constgridOptions=reactive({border:true,showOverflow:true,rowConfig:{keyField:'id'},editConfig:{trigger:'click',mode:'cell'},columns:[{type:'seq',width:50},{field:'name',title:'Name',editRender:nameEditRender},{field:'sex',title:'Sex',editRender:sexEditRender},{field:'age',title:'Age',editRender:ageEditRender},{field:'address',title:'Address',editRender:{name:'VxeInput'}}],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:'x1111',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'}]})</script>

使用场景：适用于不同角色对不同字段拥有不同编辑权限的场景。例如，普通用户只能编辑“姓名”和“性别”，而管理员可以编辑所有字段。

表级权限控制：一键禁用整个表格的编辑

当需要临时禁用整个表格的编辑功能时（例如某些用户无权限编辑），可以通过 editConfig.enabled 一键控制。

核心配置

consteditConfig=reactive({trigger:'click',mode:'cell',enabled:true// 控制整个表格是否可编辑})

代码

<template><div>全表编辑：<vxe-switchv-model="editConfig.enabled"></vxe-switch><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'consteditConfig=reactive({trigger:'click',mode:'cell',enabled:true})constnameEditRender=reactive({name:'VxeInput'})constsexEditRender=reactive({name:'VxeInput'})constageEditRender=reactive({name:'VxeNumberInput',props:{type:'integer'}})constgridOptions=reactive({border:true,showOverflow:true,rowConfig:{keyField:'id'},editConfig,columns:[{type:'seq',width:50},{field:'name',title:'Name',editRender:nameEditRender},{field:'sex',title:'Sex',editRender:sexEditRender},{field:'age',title:'Age',editRender:ageEditRender},{field:'address',title:'Address',editRender:{name:'VxeInput'}}],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:'x1111',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'}]})</script>

使用场景：适用于页面整体权限控制，例如：只读模式、或禁止用户编辑等。

两种控制方式的对比

组合使用：表级 + 列级权限

在实际项目中，两种权限控制方式可以组合使用，实现更精细的权限管理：

// 表级：全局控制consteditConfig=reactive({enabled:true// 全局开关})// 列级：特殊列独立控制constsecretEditRender=reactive({name:'VxeInput',enabled:false// 即使全局开启，该列仍不可编辑})

当 editConfig.enabled = false 时，整个表格变为只读，此时列级的 enabled 配置不再生效（因为全局权限优先级更高）。

两种方式可以配合使用，形成“全局开关 + 列级例外”的权限模型，满足各种复杂的业务需求。通过简单的响应式绑定，权限切换可以实时生效，无需刷新页面。

https://vxetable.cn