ant design pro 可编辑表格

import React, {useRef,} from 'react';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {ProColumns, ActionType, TableDropdown} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {index} from './service';

type columnsType = {
    id:number;
    apply_company_name: string;
    product_name: string
    salesperson_name: string
    applicant_name: string
    applicant_phone: string
    state: number
    created_at: any
    url:string
}
const TableList: React.FC = () => {

    const actionRef = useRef<ActionType>();

    const columns: ProColumns<columnsType>[] = [
        {
            title: '序号',
            valueType: "index",
            search: false
        },
        {
            title: '申请公司',
            dataIndex: 'apply_company_name',
            search: false
        },
        {
            title: '项目名称',
            dataIndex: 'product_name',
            search: false
        },
        {
            title: '杜邦销售姓名',
            dataIndex: 'salesperson_name',
        },
        {
            title: '表单填写人姓名',
            dataIndex: 'applicant_name',
            search: false
        },
        {
            title: '联系电话',
            dataIndex: 'applicant_phone',
            search:false
        },
        {
            title: '提交时间',
            dataIndex: 'created_at',
            valueType: 'dateTime',
            search: false
        },
        {
            title: '操作',
            valueType: 'option',
            render: (text, record, _, action) => [// 重点
                <a
                    key="editable"
                    onClick={() => {
                        action?.startEditable?.(record.id);
                    }}
                >
                    编辑
                </a>,
                <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
                    查看
                </a>,
            ],
        },
    ];
    return (
        <PageHeaderWrapper>
            <ProTable
                headerTitle=""
                actionRef={actionRef}
                rowKey="id"
                request={async (params) => {
                    console.log(params)
                    const result = await index(params);
                    return result.data;
                }}
                options={{fullScreen:true}}
                columns={columns}
                search={{filterType:"light"}}
            />
        </PageHeaderWrapper>
    );
};

export default TableList;