ant-design / ant-design/pro-components

🐛[BUG] [antd: Select] `bordered` is deprecated. Please use `variant` instead.

Open
#8,091 16 comments 0 reactions 0 assignees View on GitHub
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
![image](https://github.com/ant-design/pro-components/assets/32354856/627c0369-7f2e-4be9-8ed2-63b776605bcb)

### 📷 复现步骤

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.