如何将PrimeReact Dropdown组件下拉列表改为每行3项网格布局

架构老林

2026-7-6

实现PrimeReact Dropdown下拉列表网格布局（每行3项）

要把Dropdown的下拉列表从默认的每行1项改成每行3项的网格布局，PrimeReact没有内置配置，得通过自定义选项模板+CSS样式实现，具体步骤如下：

1. 自定义选项模板

给Dropdown添加itemTemplate属性，自定义每个选项的渲染结构：

import { Dropdown } from 'primereact/dropdown'

// 自定义选项模板函数
const companyItemTemplate = (option) => {
  return (
    <div className="dropdown-grid-item">
      {option.label}
    </div>
  );
};

<Dropdown
  options={companyOptions}
  onChange={this.handleCompanyChange}
  value={this.state.selectedCompanyTemp}
  placeholder='---'
  filter
  className='filterbutton-company'
  filterPlaceholder='Search company'
  itemTemplate={companyItemTemplate} // 绑定自定义模板
/>

2. 添加网格布局CSS

在全局样式或者组件样式文件中添加以下CSS，设置下拉面板为网格布局：

/* 针对Dropdown的下拉面板容器 */
.filterbutton-company .p-dropdown-panel .p-dropdown-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行3列，等分宽度 */
  gap: 8px; /* 选项之间的间距，可按需调整 */
  padding: 8px;
}

/* 网格项基础样式 */
.dropdown-grid-item {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 鼠标悬停高亮效果 */
.dropdown-grid-item:hover {
  background-color: #f0f0f0;
}

/* 选中项高亮样式 */
.filterbutton-company .p-dropdown-panel .p-dropdown-item.p-highlight .dropdown-grid-item {
  background-color: #e3f2fd;
}