ant-design / ant-design/pro-components
🐛[BUG] [antd: Select] `bordered` is deprecated. Please use `variant` instead.
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
### 🐛 bug 描述
I created a react project using Vite and copied the demo code from the official website into the project, but the browser got an error

### 📷 复现步骤
I created a react project using Vite and copied the demo code from the official website into the project, but the browser got an error
### 🏞 期望结果
No error reported
### 💻 复现代码
```
import { EllipsisOutlined, SearchOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown, Input } from 'antd';
const valueEnum = {
0: 'close',
1: 'running',
2: 'online',
3: 'error',
};
export type TableListItem = {
key: number;
name: string;
containers: number;
creator: string;
status: string;
createdAt: number;
progress: number;
money: number;
memo: string;
};
const tableListDataSource: TableListItem[] = [];
const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];
for (let i = 0; i < 5; i += 1) {
tableListDataSource.push({
key: i,
name: 'AppName',
containers: Math.floor(Math.random() * 20),
creator: creators[Math.floor(Math.random() * creators.length)],
status: valueEnum[((Math.floor(Math.random() * 10) % 4) + '') as '0'],
createdAt: Date.now() - Math.floor(Math.random() * 2000),
money: Math.floor(Math.random() * 2000) * i,
progress: Math.ceil(Math.random() * 100) + 1,
memo:
i % 2 === 1
? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴'
: '简短备注文案',
});
}
const columns: ProColumns[] = [
{
title: '排序',
dataIndex: 'index',
valueType: 'indexBorder',
width: 48,
},
{
title: '应用名称',
dataIndex: 'name',
render: (_) => {_},
// 自定义筛选项功能具体实现请参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel
filterDropdown: () => (
),
filterIcon: (filtered) => (
),
},
{
title: '创建者',
dataIndex: 'creator',
valueEnum: {
all: { text: '全部' },
付小小: { text: '付小小' },
曲丽丽: { text: '曲丽丽' },
林东东: { text: '林东东' },
陈帅帅: { text: '陈帅帅' },
兼某某: { text: '兼某某' },
},
},
{
title: '状态',
dataIndex: 'status',
initialValue: 'all',
filters: true,
onFilter: true,
valueEnum: {
all: { text: '全部', status: 'Default' },
close: { text: '关闭', status: 'Default' },
running: { text: '运行中', status: 'Processing' },
online: { text: '已上线', status: 'Success' },
error: { text: '异常', status: 'Error' },
},
},
{
title: '备注',
dataIndex: 'memo',
ellipsis: true,
copyable: true,
},
{
title: '操作',
width: 180,
key: 'option',
valueType: 'option',
render: () => [
链路,
报警,
监控,
,
],
},
];
export default () => {
return (
columns={columns}
request={(params, sorter, filter) => {
// 表单搜索项会从 params 传入,传递给后端接口。
console.log(params, sorter, filter);
return Promise.resolve({
data: tableListDataSource,
success: true,
});
}}
rowKey="key"
pagination={{
showQuickJumper: true,
}}
search={{
layout: 'vertical',
defaultCollapsed: false,
}}
dateFormatter="string"
toolbar={{
title: '高级表格',
tooltip: '这是一个标题提示',
}}
toolBarRender={() => [
危险按钮
,
查看日志,
创建应用
,
,
]}
/>
);
};
```
### © 版本信息
- ProComponents 版本: [latest]
- umi 版本
- 浏览器环境 122.0.6238.2
- 开发环境 [win10]
### 🚑 其他信息
Contributor guide
Research direction
No repository file or test is named. Start by reproducing the provided ProTable example in a Vite React project and inspect the browser message, then locate the official demo or component usage that passes `bordered` to Select. Done means the reproduced example no longer reports the deprecation problem and the relevant behavior remains covered if an existing test applies.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100