在 Ant Design ProTable
中,设置搜索栏下拉框的宽度稍有不同。受控于 valueType
属性中的 select
或其它类型,你可以在列定义中提供一个 request
函数来定义下拉选项,并且使用 fieldProps
来修改下拉选择的一些属性。
这就是如何在 ProTable 列定义中设置一个下拉选择的宽度:
import ProTable from '@ant-design/pro-table';
const columns = [
{
title: 'Status',
dataIndex: 'status',
// 下面的 valueType 可以是其他类型,比如 'select'
valueType: 'select',
request: async () => [
{ label: 'Option1', value: 'Option1' },
{ label: 'Option2', value: 'Option2' },
],
fieldProps: {
dropdownMatchSelectWidth: false,
dropdownStyle: { width: 130 },
},
},
// 其他列定义...
];
// 在你的组件中使用 ProTable
<ProTable columns={columns} request={...} /> // 替换请求数据的代码
以上代码中,我们为 status
列指定了 valueType
为 select
,并且通过 request
函数定义下拉选项。然后,我们使用 fieldProps
来关闭下拉菜单与选择框宽度的匹配(dropdownMatchSelectWidth: false
),并且设置下拉菜单宽度为 130px
。