Antd EditableProTable同列不同行如何设置不同valueEnum？

EditableProTable的valueEnum支持函数形式，可以接收当前行的record参数，通过这个特性就能实现每行返回不同的选择选项，不用局限于列层面的固定枚举。

实现方式1：根据行数据字段动态返回选项 #

直接在列配置的valueEnum中定义函数，根据当前行的标识字段（比如type、id、rowIndex）返回对应的选项集合：

const columns = [
  {
    title: '动态选择列',
    dataIndex: 'selectedValue',
    valueType: 'select',
    // 函数形式的valueEnum，接收当前行record作为参数
    valueEnum: (record) => {
      // 假设第二行的rowIndex为1（或自定义特殊字段）
      if (record.rowIndex === 1) {
        return {
          opt1: '第二行专属选项1',
          opt2: '第二行专属选项2',
        };
      }
      // 其他行用通用选项
      return {
        commonOpt1: '通用选项1',
        commonOpt2: '通用选项2',
        commonOpt3: '通用选项3',
      };
    },
  },
  // 其他列配置...
];

实现方式2：基于外部存储的行级选项 #

如果选项数据是从接口获取或者需要动态维护的，可以把每行的选项存在组件状态或外部对象中，再通过record的唯一标识读取：

import { useState } from 'react';

// 组件内维护每行的选项映射，key为行的唯一id
const [rowSpecificOptions, setRowSpecificOptions] = useState({
  'row-001': {
    optA: '行1选项A',
    optB: '行1选项B',
  },
  'row-002': {
    optX: '行2选项X',
    optY: '行2选项Y',
  },
});

const columns = [
  {
    title: '动态选择列',
    dataIndex: 'selectedValue',
    valueType: 'select',
    valueEnum: (record) => {
      // 根据行的id获取对应的选项，没有则返回默认空对象
      return rowSpecificOptions[record.id] || {};
    },
  },
];

注意事项 #

• 确保每行数据包含可唯一区分的字段（比如id、自定义type、rowIndex），让valueEnum函数能准确判断返回哪个选项集合
• 如果支持新增行，要给新增行预设选项规则（比如默认用通用选项，或者根据用户操作切换类型后加载对应选项）
• valueEnum函数返回的结构需符合Antd要求：键为选项值，值为显示文本（也可以是{ label: '文本', value: '值' }的格式）

内容的提问来源于stack exchange，提问作者Nirmesh Rastogi