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()
})
}