如何移除PrimeNG Picklist组件中多余按钮（仅保留左右箭头）？

PrimeNG Picklist组件没有提供直接的配置项来控制按钮的显示/隐藏，要删除首尾两组按钮、仅保留左右单移箭头，可以通过自定义CSS实现。

具体实现步骤 #

在你的组件样式文件（如xxx.component.css）或全局样式文件中添加以下CSS代码：

/* 隐藏全选右移（>>）和全选左移（<<）按钮 */
.p-picklist .p-picklist-buttons .p-button:first-child,
.p-picklist .p-picklist-buttons .p-button:last-child {
    display: none;
}

/* 若存在目标列表右侧的上下移动按钮（↑↓），也一并隐藏 */
.p-picklist .p-picklist-target-controls {
    display: none;
}

适配不同版本的说明 #

如果你的PrimeNG版本中按钮类名有差异，可通过浏览器开发者工具（F12）查看按钮的具体类名，调整选择器。例如部分版本中全选按钮的类为p-picklist-button-move-to-target-all和p-picklist-button-move-to-source-all，可替换为：

.p-picklist-button-move-to-target-all,
.p-picklist-button-move-to-source-all {
    display: none;
}

添加完成后刷新页面，即可看到Picklist仅保留左右单移箭头按钮，其余目标按钮已被隐藏。

内容的提问来源于stack exchange，提问作者Manu Guzman