如何在Ant Design可编辑表格单元格中添加Autocomplete功能

核心思路是替换可编辑单元格默认的输入组件，改用Ant Design的AutoComplete组件，让单元格激活编辑时自动触发预设选项的建议提示。

实现步骤 #

1. 准备预设选项数据
   定义自动补全的选项列表，格式需符合AutoComplete组件的要求：

const autoCompleteOptions = [
  { value: '前端开发' },
  { value: '后端开发' },
  { value: '产品经理' },
  { value: 'UI设计' },
  { value: '测试工程师' },
];

2. 自定义带自动补全的可编辑单元格
   创建自定义组件，结合表格的编辑状态控制AutoComplete的显示：

import { Table, AutoComplete, Input } from 'antd';
import React from 'react';

const EditableAutoCompleteCell = ({
  editing,
  dataIndex,
  title,
  record,
  onChange,
  ...restProps
}) => {
  const inputRef = React.useRef(null);
  
  // 编辑激活时自动聚焦输入框
  React.useEffect(() => {
    if (editing) {
      inputRef.current?.focus();
    }
  }, [editing]);

  return (
    <Table.Cell {...restProps}>
      {editing ? (
        <AutoComplete
          ref={inputRef}
          options={autoCompleteOptions}
          value={record[dataIndex]}
          onChange={(value) => onChange(value)}
          placeholder={`请输入${title}`}
          autoFocus
        >
          <Input />
        </AutoComplete>
      ) : (
        record[dataIndex] || '-'
      )}
    </Table.Cell>
  );
};

3. 在表格列配置中使用自定义单元格
   将自定义组件接入表格的列配置，结合表格的编辑状态管理逻辑：

const columns = [
  {
    title: '职位',
    dataIndex: 'job',
    key: 'job',
    editable: true,
    render: (text, record) => {
      return (
        <EditableAutoCompleteCell
          editing={record.editing}
          dataIndex="job"
          title="职位"
          record={record}
          onChange={(value) => {
            // 这里替换为你实际更新表格数据源的逻辑
            // 示例：更新数据源中对应行的job字段
            setDataSource(prev => prev.map(item => 
              item.key === record.key ? {...item, job: value} : item
            ));
          }}
        />
      );
    },
  },
  // 其他列配置...
];

关键注意点 #

• 确保表格的编辑状态（如record.editing字段）能正确控制单元格的编辑模式切换
• onChange回调需和表格数据源的更新逻辑绑定，保证输入内容能同步到表格数据中
• 如果需要远程搜索的自动补全，可通过AutoComplete的onSearch事件触发数据请求，动态更新options

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