🧐[问题]EditableProTable使用搜索的问题（readonly和自定义搜索表单）

[0131LWG]

🧐 问题描述

1. 使用EditableProTable时columns参数readonly: true时，搜索会显示-，如果想要搜索还是想要生成正常的时间选择器应该如何配置呢？希望的是列表中的失效时间新增和编辑时不可修改，并可以正常渲染搜索表单项
2. 使用EditableProTable时如果表格中编辑的表单项为dateTime如何在搜索表单自定义为日期区间搜索呢？有思考过使用renderFormItem，但renderFormItem会同时影响表格中的表单项和搜索的表单

💻 示例代码

import { EditableProTable } from '@ant-design/pro-components';
import React, { useState } from 'react';
import { requiredValidator } from '@/utils/validators';
import { cityArray } from '@/constants/pca';
import {
  deliverAddressListApi,
  deliverAddressPostApi,
  deliverAddressPatchApi,
} from './api';
import TableAction from '@/components/Table/TableAction';
import { Popconfirm } from 'antd';
import ImportButton from '@/components/ImportButton';

const DeliverAddress: React.FC<unknown> = () => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);

  const editableSave = async (data: any, row: any) => {
    const params = {
      ...data,
      province: data.region[0],
      city: data.region[1],
      county: data.region[2],
    };
    const api = row.vendorId ? deliverAddressPatchApi : deliverAddressPostApi;
    return await api({
      ...params,
    });
  };

  const columns: ProColumns<any>[] = [
    {
      title: 'Vendor ID',
      dataIndex: 'vendorId',
      formItemProps: requiredValidator(),
    },
    {
      title: '发货省市区',
      dataIndex: 'region',
      valueType: 'cascader',
      fieldProps: {
        options: cityArray,
      },
      render: (_, record) =>
        record.region
          ? record.region.join('/')
          : `${record.province}/${record.city}/${record.county}`,
    },
    {
      title: '发货地址',
      dataIndex: 'address',
      hideInSearch: true,
      valueType: 'text',
    },
    {
      title: '生效时间',
      dataIndex: 'createdAt',
      valueType: 'dateTime',
      readonly: true,
      width: '15%',
    },
    {
      title: '失效时间',
      dataIndex: 'disabledAt',
      valueType: 'dateTime',
      width: '15%',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (text, record, _, action) => (
        <TableAction
          editClick={() => {
            record.region = [record.province, record.city, record.county];
            action?.startEditable?.(record.id);
          }}
          deleteClick={() => {}}
          action={
            <Popconfirm
              title="停用此发货地？"
              onConfirm={() => {
                console.log('停用');
              }}
            >
              <a>停用</a>
            </Popconfirm>
          }
        ></TableAction>
      ),
    },
  ];

  return (
    <>
      <EditableProTable<any>
        controlled
        search={{ filterType: 'query' }}
        rowKey="id"
        headerTitle="发货地管理"
        recordCreatorProps={{
          position: 'top',
          record: () => ({ id: Date.now() }),
        }}
        loading={false}
        columns={columns}
        pagination={{}}
        dateFormatter="string"
        request={async (params) => {
          const res = await deliverAddressListApi(params);
          return {
            total: res.meta.total,
            data: res.data,
            success: res.success,
          };
        }}
        toolbar={{
          actions: [<ImportButton key="button" />],
        }}
        editable={{
          type: 'multiple',
          editableKeys,
          onSave: async (rowKey, data, row) => {
            await editableSave(data, row);
          },
          onChange: setEditableRowKeys,
        }}
      />
    </>
  );
};

export default DeliverAddress;

🚑 其他信息

[Gip886]

自定义渲染吧

[0131LWG]

自定义渲染吧

谢谢可以了