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

[iien21]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

protable选择框在控制台报 Warning: [antd: Select] bordered is deprecated. Please use variant instead.

📷 复现步骤

在protable中的columns使用 { title: '客户来源', dataIndex: 'clientSource', valueEnum: { manual: { text: '人工', value: 2 }, clue: { text: '转化', value: 1 }, } , render: (s) => { return <>{s}</>; }, }

🏞 期望结果

升级或者在哪里改不报警告

💻 复现代码

很常见的问题

© 版本信息

• ProComponents 版本: [^2.6.48]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

基本上很容易复现

🚑 其他信息

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<TableListItem>[] = [ { title: '排序', dataIndex: 'index', valueType: 'indexBorder', width: 48, }, { title: '应用名称', dataIndex: 'name', render: () => {}, // 自定义筛选项功能具体实现请参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel filterDropdown: () => ( <div style={{ padding: 8 }}> <Input style={{ width: 188, marginBlockEnd: 8, display: 'block' }} /> ), filterIcon: (filtered) => ( <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} /> ), }, { 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: () => [ 链路, 报警, 监控, <TableDropdown key="actionGroup" menus={[ { key: 'copy', name: '复制' }, { key: 'delete', name: '删除' }, ]} />, ], }, ];

export default () => { return ( <ProTable<TableListItem> 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={() => [ <Button key="danger" danger> 危险按钮 </Button>, <Button key="show">查看日志</Button>, <Button type="primary" key="primary"> 创建应用 </Button>,

    <Dropdown
      key="menu"
      menu={{
        items: [
          {
            label: '1st item',
            key: '1',
          },
          {
            label: '2nd item',
            key: '2',
          },
          {
            label: '3rd item',
            key: '3',
          },
        ],
      }}
    >
      <Button>
        <EllipsisOutlined />
      </Button>
    </Dropdown>,
  ]}
/>

); };

[github-actions[bot]]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [#8186][🐛[BUG] ing: [antd: Select] bordered is deprecated. Please use variant instead. ][94%]
• [#8295][🐛[BUG] Warning: [antd: TimePicker] bordered is deprecated. Please use variant instead. ][92%]
• [#8091][🐛[BUG] [antd: Select] bordered is deprecated. Please use variant instead.][85%]
• [#6162][🐛[BUG] Warning: [antd: ***] overlay is deprecated. Please use menu instead.][77%]

[iien21]

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<TableListItem>[] = [ { title: '排序', dataIndex: 'index', valueType: 'indexBorder', width: 48, }, { title: '应用名称', dataIndex: 'name', render: () => {}, // 自定义筛选项功能具体实现请参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel filterDropdown: () => ( <div style={{ padding: 8 }}> <Input style={{ width: 188, marginBlockEnd: 8, display: 'block' }} /> ), filterIcon: (filtered) => ( <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} /> ), }, { 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: () => [ 链路, 报警, 监控, <TableDropdown key="actionGroup" menus={[ { key: 'copy', name: '复制' }, { key: 'delete', name: '删除' }, ]} />, ], }, ];

export default () => { return ( <ProTable<TableListItem> 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={() => [ <Button key="danger" danger> 危险按钮 </Button>, <Button key="show">查看日志</Button>, <Button type="primary" key="primary"> 创建应用 </Button>,

    <Dropdown
      key="menu"
      menu={{
        items: [
          {
            label: '1st item',
            key: '1',
          },
          {
            label: '2nd item',
            key: '2',
          },
          {
            label: '3rd item',
            key: '3',
          },
        ],
      }}
    >
      <Button>
        <EllipsisOutlined />
      </Button>
    </Dropdown>,
  ]}
/>

); }; 跟这个情况一样