自定义 valueType

自定义 tag

import { useContext, useRef, useState } from 'react';
import { Input, Space, Tag } from 'antd';
import { ProProvider, ProTable } from '@ant-design/pro-components';
import type { InputRef } from 'antd';
export default () => {
  const values = useContext(ProProvider);
  return (
    <ProProvider.Provider
      value={{
        ...values,
        valueTypeMap: {
          link: {
            render: (text) => <a>{text}</a>,
            renderFormItem: (text, props) => (
              <Input placeholder="请输入链接" {...props?.fieldProps} />
            ),
          },
          tags: {
            render: (text) => {
              return (
                <>
                  {[text].flat(1).map((item) => (
                    <Tag key={item.value}>{item.label}</Tag>
                  ))}
                </>
              );
            },
            renderFormItem: (text, props) => (
              <TagList {...props} {...props?.fieldProps} />
            ),
          },
        },
      }}
    >
      <ProTable<TableListItem, Record<string, any>, 'link' | 'tags'>
        columns={columns}
        request={() => {
          return Promise.resolve({
            total: 200,
            data: tableListDataSource,
            success: true,
          });
        }}
        rowKey="key"
        headerTitle="自定义 valueType"
      />
    </ProProvider.Provider>
  );
};

Tag

import type { ProColumns } from '@ant-design/pro-components';
import { ProProvider, ProTable } from '@ant-design/pro-components';
import type { InputRef } from 'antd';
import { Input, Space, Tag } from 'antd';
import React, { useContext, useRef, useState } from 'react';
interface IProps {
  value?: {
    key: string;
    label: string;
  }[];
  onChange?: (
    value: {
      key: string;
      label: string;
    }[],
  ) => void;
}
const TagList: React.FC<IProps> = ({ value, onChange }) => {
  const ref = useRef<InputRef | null>(null);
  const [newTags, setNewTags] = useState<
    { key: string; label: string }[]
  >([]);
  const [inputValue, setInputValue] = useState<string>('');
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };
  const handleInputConfirm = () => {
    let tempsTags = [...(value || [])];
    if (
      inputValue &&
      tempsTags.filter((tag) => tag.label === inputValue).length === 0
    ) {
      tempsTags = [
        ...tempsTags,
        { key: `new-${tempsTags.length}`, label: inputValue },
      ];
    }
    onChange?.(tempsTags);
    setNewTags([]);
    setInputValue('');
  };
  return (
    <Space>
      {(value || []).concat(newTags).map((item) => (
        <Tag key={item.key}>{item.label}</Tag>
      ))}
      <Input
        ref={ref}
        type="text"
        size="small"
        style={{ width: 78 }}
        value={inputValue}
        onChange={handleInputChange}
        onBlur={handleInputConfirm}
        onPressEnter={handleInputConfirm}
      />
    </Space>
  );
};

columns

import type { ProColumns } from '@ant-design/pro-components';
export type TableItem = {
  key: number;
  name: string;
  status: {
    label: string | number;
    value: number;
  }[];
};
const dataSource: TableItem[] = [
  {
    "key": 1,
    "name": "TradeCode 1",
    "status": [
      { "value": 3, "label": "online" },
      { "value": 2, "label": "online" }
    ]
  },
  {
    "key": 2,
    "name": "TradeCode 2",
    "status": [
      { "value": 3, "label": "close" },
      { "value": 6, "label": "running" }
    ]
  },
  {
    "key": 3,
    "name": "TradeCode 3",
    "status": [
      { "value": 0, "label": "running" },
    ]
  },
]
const columns: ProColumns<TableListItem, 'link' | 'tag'>[] = [
  {
    title: '链接',
    dataIndex: 'name',
    valueType: 'link',
  },
  {
    title: '标签',
    dataIndex: 'status',
    valueType: 'tag',
  },
  {
    title: '操作',
    key: 'option',
    valueType: 'option',
    render: (_, row, index, action) => [
      <a
        key="a"
        onClick={() => {
          action?.startEditable(row.key);
        }}
      >
        编辑
      </a>,
    ],
  },
];

自定义 valueType 参考

https://github.com/ant-design/pro-components/blob/master/packages/table/src/demos/customization-value-type.tsx