antd table 编辑单元格功能

 EditCell.js:

import React, { useState, useEffect, useRef } from 'react'
import { Popover, Input, Form, Button } from 'antd'
import Icon from './Icon'

export default function EditCell(props) {
  const {
    record,
    handleEditCell,
    placement = 'topLeft',
    title,
    children,
    getEdieCellFields = getEdieCellFieldsExample,
  } = props
  const [form] = Form.useForm()
  const inputEl = useRef(null)
  const [visible, setVisible] = useState(false)
  const [initialValues, setInitialValues] = useState({
    ...record,
  })

  //编辑接口调用成功后执行这个回调
  const callback = () => {
    setVisible(false)
  }

  //添加或编辑
  const handleFinish = (values) => {
    console.log('Success:', values)
    handleEditCell({ record, values, callback })
  }

  //校验失败
  const handleFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }

  //气泡卡片显示状态变化
  const handleVisibleChange = (visible) => {
    setVisible(visible)
    setInitialValues({ ...record })
  }

  //表单数据报错最新
  useEffect(() => {
    form.resetFields()
    
    setTimeout(() => {
      inputEl.current && inputEl.current.focus()
    }, 100)
    
    // eslint-disable-next-line
  }, [initialValues])

  function getEdieCellFieldsExample({inputEl}) {
    return (
      <>
        <Form.Item
          label="名称"
          name="name"
          rules={[
            {
              required: true,
              message: '请输入名称！',
            },
          ]}
        >
          <Input ref={inputEl} />
        </Form.Item>
      </>
    )
  }

  //表单内容
  const getContent = () => {
    return (
      <div className="m-edit-cell-content">
        <Form
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          initialValues={{ ...initialValues }}
          onFinish={handleFinish}
          onFinishFailed={handleFinishFailed}
        >
          <div className="m-edit-cell-form-item-wrap">
            {getEdieCellFields({inputEl})}
          </div>
          <Form.Item
            wrapperCol={{ offset: 6, span: 18 }}
            className="m-edit-cell-footer"
          >
            <Button type="primary" htmlType="submit" className="m-space">
              <Icon name="submit" className="m-tool-btn-icon"></Icon>
              提交
            </Button>
            <Button
              className="m-space"
              onClick={() => {
                form.resetFields()
              }}
            >
              <Icon name="reset" className="m-tool-btn-icon"></Icon>
              重置
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }

  return (
    <Popover
      placement={placement}
      title={title}
      content={getContent()}
      trigger="click"
      visible={visible}
      onVisibleChange={handleVisibleChange}
      getPopupContainer={() => document.getElementById('m-content-wrap')}
      forceRender
    >
      <div className="m-popover-inner">{children}</div>
    </Popover>
  )
}

config.js（列字段）:

import { Form, Col, Input, Button, DatePicker, Select } from 'antd'
import { Icon, EditCell } from '../../../../../components/light'
import moment from 'moment'

const { RangePicker } = DatePicker
const { Option } = Select

//表格列字段
const getColumns = ({ props, handleEditCell }) => {
  return [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '员工',
      dataIndex: 'name',
      render: (text, record) => {
        return (
          <EditCell
            record={record}
            handleEditCell={handleEditCell}
            placement="topLeft"
            //title="编辑"
            getEdieCellFields={({inputEl}) => {
              return (
                <>
                  <Form.Item
                    label="员工"
                    name="name"
                    rules={[
                      {
                        required: true,
                        message: '请输入名称！',
                      },
                    ]}
                  >
                    <Input ref={inputEl} />
                  </Form.Item>
                  <Form.Item label="备注" name="remarks">
                    <Input />
                  </Form.Item>
                </>
              )
            }}
          >
            {text}
          </EditCell>
        )
      },
    },
    {
      title: '部门',
      dataIndex: '',
    },
    {
      title: '好友',
      dataIndex: '',
    },
    {
      title: '上次聊天',
      dataIndex: '',
    },
    {
      title: '操作',
      //width: 220,
      render: (record) => {
        return (
          <div className="m-action">
            <Button
              className="m-action-btn"
              size="small"
              danger
              onClick={() => props.onDelete(record)}
            >
              删除
            </Button>
          </div>
        )
      },
    },
  ]
}

编辑函数：

  //单元格编辑
  const handleEditCell = ({ record, values, callback }) => {
    Api.light
      .templateEdit({
        id: record.id,
        dataItem: { ...record, ...values },
      })
      .then((res) => {
        if (res.state === 1) {
          handleSearch({ page: current })
        }
        callback && callback()
      })
  }