当前位置：首页 > news >正文

ProTable样式缺失

news 2024/10/26 16:07:00

在使用Ant Design Pro开发页面时，想要引用ProComponents组件中的ProTable表格，引入官方文档的案例发现缺少样式

官方文档地址ProTable - 高级表格 - ProComponents (ant.design)

引入的是第一个Demos

样式预览：
在这里插入图片描述
代码

import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown, Space, Tag } from 'antd';
import { useRef } from 'react';
import request from 'umi-request';
export const waitTimePromise = async (time: number = 100) => {return new Promise((resolve) => {setTimeout(() => {resolve(true);}, time);});
};export const waitTime = async (time: number = 100) => {await waitTimePromise(time);
};type GithubIssueItem = {url: string;id: number;number: number;title: string;labels: {name: string;color: string;}[];state: string;comments: number;created_at: string;updated_at: string;closed_at?: string;
};const columns: ProColumns<GithubIssueItem>[] = [{dataIndex: 'index',valueType: 'indexBorder',width: 48,},{title: '标题',dataIndex: 'title',copyable: true,ellipsis: true,tooltip: '标题过长会自动收缩',formItemProps: {rules: [{required: true,message: '此项为必填项',},],},},{disable: true,title: '状态',dataIndex: 'state',filters: true,onFilter: true,ellipsis: true,valueType: 'select',valueEnum: {all: { text: '超长'.repeat(50) },open: {text: '未解决',status: 'Error',},closed: {text: '已解决',status: 'Success',disabled: true,},processing: {text: '解决中',status: 'Processing',},},},{disable: true,title: '标签',dataIndex: 'labels',search: false,renderFormItem: (_, { defaultRender }) => {return defaultRender(_);},render: (_, record) => (<Space>{record.labels.map(({ name, color }) => (<Tag color={color} key={name}>{name}</Tag>))}</Space>),},{title: '创建时间',key: 'showTime',dataIndex: 'created_at',valueType: 'date',sorter: true,hideInSearch: true,},{title: '创建时间',dataIndex: 'created_at',valueType: 'dateRange',hideInTable: true,search: {transform: (value) => {return {startTime: value[0],endTime: value[1],};},},},{title: '操作',valueType: 'option',key: 'option',render: (text, record, _, action) => [<akey="editable"onClick={() => {action?.startEditable?.(record.id);}}>编辑</a>,<a href={record.url} target="_blank" rel="noopener noreferrer" key="view">查看</a>,<TableDropdownkey="actionGroup"onSelect={() => action?.reload()}menus={[{ key: 'copy', name: '复制' },{ key: 'delete', name: '删除' },]}/>,],},
];export default () => {const actionRef = useRef<ActionType>();return (<ProTable<GithubIssueItem>columns={columns}actionRef={actionRef}cardBorderedrequest={async (params, sort, filter) => {console.log(sort, filter);await waitTime(2000);return request<{data: GithubIssueItem[];}>('https://proapi.azurewebsites.net/github/issues', {params,});}}editable={{type: 'multiple',}}columnsState={{persistenceKey: 'pro-table-singe-demos',persistenceType: 'localStorage',defaultValue: {option: { fixed: 'right', disable: true },},onChange(value) {console.log('value: ', value);},}}rowKey="id"search={{labelWidth: 'auto',}}options={{setting: {listsHeight: 400,},}}form={{// 由于配置了 transform，提交的参数与定义的不同这里需要转化一下syncToUrl: (values, type) => {if (type === 'get') {return {...values,created_at: [values.startTime, values.endTime],};}return values;},}}pagination={{pageSize: 5,onChange: (page) => console.log(page),}}dateFormatter="string"headerTitle="高级表格"toolBarRender={() => [<Buttonkey="button"icon={<PlusOutlined />}onClick={() => {actionRef.current?.reload();}}type="primary">新建</Button>,<Dropdownkey="menu"menu={{items: [{label: '1st item',key: '1',},{label: '2nd item',key: '2',},{label: '3rd item',key: '3',},],}}><Button><EllipsisOutlined /></Button></Dropdown>,]}/>);
};