vxe-table 实现编辑列的权限控制：列级与表级权限管理

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

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

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

核心配置

javascript 复制代码

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

配置项	类型	说明
editRender.enabled	boolean	控制该列的编辑功能是否开启。true 可编辑，false 为只读。

代码

html 复制代码

<template>
  <div>
    name编辑：<vxe-switch v-model="nameEditRender.enabled"></vxe-switch> sex编辑：<vxe-switch v-model="sexEditRender.enabled"></vxe-switch>

    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const nameEditRender = reactive({
  name: 'VxeInput',
  enabled: true
})
const sexEditRender = reactive({
  name: 'VxeInput',
  enabled: true
})
const ageEditRender = reactive({
  name: 'VxeNumberInput',
  props: {
    type: 'integer'
  }
})
const gridOptions = 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 一键控制。

核心配置

javascript 复制代码

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

代码

html 复制代码

<template>
  <div>
    全表编辑：<vxe-switch v-model="editConfig.enabled"></vxe-switch>

    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const editConfig = reactive({
  trigger: 'click',
  mode: 'cell',
  enabled: true
})
const nameEditRender = reactive({
  name: 'VxeInput'
})
const sexEditRender = reactive({
  name: 'VxeInput'
})
const ageEditRender = reactive({
  name: 'VxeNumberInput',
  props: {
    type: 'integer'
  }
})
const gridOptions = 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>

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

两种控制方式的对比

控制维度	配置方式	粒度	适用场景
列级控制	editRender.enabled	单列	不同字段有不同的编辑权限（如角色权限分配）
表级控制	editConfig.enabled	整个表格	全局禁用/启用编辑（如只读模式、数据锁定）
组合使用	两者同时配置	灵活组合	表级权限 + 列级例外（如管理员可编辑全部，普通用户仅部分列）

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

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

javascript 复制代码

// 表级：全局控制
const editConfig = reactive({
  enabled: true     // 全局开关
})

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

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

控制方式	配置项	适用层级
列级权限	editRender.enabled	精准控制单列的编辑权限，适合字段级别的权限分配。
表级权限	editConfig.enabled	一键控制整个表格的编辑状态，适合只读模式或全局权限切换。

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

vxetable.cn