526互联

如何设置 antd protable中的搜索下拉框的宽度值为130

发布时间 2023-07-17 17:00:17作者: Lu西西

在 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。