EditableProTable使用+自定义封装
项目使用的是ant-pro模板
有个可编辑表格的需求,效果图如下
![](https://img2020.cnblogs.com/blog/1349812/202103/1349812-20210326172323273-1512812814.png)
ant-pro提供了EditableProTable 组件,我使用的是这种https://procomponents.ant.design/components/editable-table
![](https://img2020.cnblogs.com/blog/1349812/202103/1349812-20210326172352688-106169529.png)
不过这里展示的默认都是input输入框,我这里是需要下拉框和上传组件
下拉框可以直接用select组件,不过upload需要自己封装一下
因为这个可编辑表格获取数据是根据绑定的value值,改变数据是onChange事件.upload组件没有value值,对应的是defaultFileList, 而onChange事件返回的是file.fileList.
我们可以对这两个属性重新封装,改成需要的格式
可编辑表格代码
EditZTTable.tsx
import React, { useState } from 'react' import { Row, Col, Select, Button } from 'antd' import type { ProColumns } from '@ant-design/pro-table' import { EditableProTable } from '@ant-design/pro-table' import ComUpload from '@/components/ComUpload' const { Option } = Select type DataSourceType = { id: React.Key title?: string role?: string state?: string created_at?: string [propName: string]: any } const EditZTTable: React.FC = () => { // 表格数据 const defaultData: DataSourceType[] = [ { id: 624748504, title: '活动名称一', role: '这个活动真好玩', state: 'open', created_at: '2020-05-26T09:42:56Z', // attachments: [ // { // uid: '1', // name: 'xxx.png', // status: 'done', // response: 'Server Error 500', // custom error message to show // url: 'http://www.baidu.com/xxx.png', // } // ] }, { id: 624691229, title: '活动名称二', role: '这个活动真好玩', state: 'closed', created_at: '2020-05-26T08:19:22Z', attachments: [ { uid: '1', name: 'xxx.png', status: 'done', response: 'Server Error 500', // custom error message to show url: 'http://www.baidu.com/xxx.png', }, { uid: '2', name: 'yyy.png', status: 'done', url: 'http://www.baidu.com/yyy.png', } ] }, ] // 设置选中的表格key const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() => defaultData.map((item) => item.id), ) // 设置表格数据 const [dataSource, setDataSource] = useState<DataSourceType[]>(() => defaultData) const fileColumns: ProColumns<DataSourceType>[] = [ { title: '序号', dataIndex: 'num', width: 55, editable: false, render: (_, record, index) => ( <span>{index + 1}</span> ) }, { title: '附件类型', dataIndex: 'businessType', renderFormItem: () => { return <Select showSearch> <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Option> </Select> }, formItemProps: { rules: [ { required: true, whitespace: true, message: '此项是必填项', }, ], }, }, { title: '附件上传', width: '50%', dataIndex: 'attachments', renderFormItem: () => (<ComUpload />), }, { title: '操作', valueType: 'option', width: 60, render: (text, record) => [ <a key="delete" onClick={() => { setDataSource(dataSource.filter((item) => item.id !== record.id)) }} > 删除 </a>, ], }, ] return ( <> <Row> <Col span={24}> <EditableProTable<DataSourceType> columns={columns} rowKey="id" value={dataSource} recordCreatorProps={{ newRecordType: 'dataSource', record: () => ({ id: Date.now(), }), }} editable={{ type: 'multiple', editableKeys, actionRender: (row, config, defaultDoms) => { return [defaultDoms.delete] }, onValuesChange: (record, recordList) => { setDataSource(recordList) }, onChange: (editableKeyss, editableRows: DataSourceType[]) => { setEditableRowKeys(editableKeyss) setDataSource(editableRows) }, }} /> </Col> </Row> <Row> <Col span={24} style={{ textAlign: 'right' }}> <Button style={{ margin: '15px 8px 0' }} onClick={ () => { }}>重置</Button> <Button type="primary" onClick={onSave}>保存</Button> </Col> </Row> </> ) } export default EditZTTable
upload组件封装
ComUpload.tsx
import React from 'react' import { Button, Upload } from 'antd' import { UploadOutlined } from '@ant-design/icons' type comuploadProps = { value?: { key: string; label: string; }[] onChange?: () => void } const ComUpload: React.FC<comuploadProps> = (props: comuploadProps) => { const attachments = props.value const { onChange } = props const action = `${URL_PREFIX}/file/upload` const changeFile = ({ file, fileList }) => { if (file.status !== 'uploading') { // console.log(file, fileList) const arr: any[] = [] fileList.forEach((item: any) => { if (item.response) { arr.push({ name: item.name, id: item.response.data }) } else { arr.push(item) } }) onChange(arr) } } return ( <Upload action={action} onChange={changeFile} defaultFileList={attachments} > <Button icon={<UploadOutlined />} type="text" /> </Upload> ) } export default ComUpload