如何调换PrimeReact OrderList组件中上下移动按钮的位置？

针对你的需求，提供两种可行的解决方案：

方案一：CSS快速调整 #

利用CSS的order属性，针对OrderList的控制按钮容器调整按钮顺序。PrimeReact的OrderList控制栏默认使用flex布局，因此可以通过修改按钮的order值实现位置调换：

/* 调换"移到顶部"和"上移"按钮的位置（按默认DOM顺序） */
.p-orderlist-controls .p-button:nth-child(1) {
  order: 2;
}
.p-orderlist-controls .p-button:nth-child(2) {
  order: 1;
}

如果需要更精准的选择（避免因DOM结构小变动失效），可以通过按钮图标类定位：

.p-orderlist-controls .p-button:has(.pi-angle-double-up) {
  order: 2;
}
.p-orderlist-controls .p-button:has(.pi-angle-up) {
  order: 1;
}

注：:has选择器需要现代浏览器支持，若需兼容旧浏览器，优先使用nth-child方案。

方案二：自定义控制栏（更稳定） #

使用PrimeReact提供的controlsTemplate属性，完全自定义控制按钮的顺序和样式，这是最可靠的长期解决方案：

1. 首先导入Button组件：

import { Button } from 'primereact/button';

2. 在组件内定义控制栏模板函数：

const controlsTemplate = (props) => {
  return (
    <div className="p-orderlist-controls">
      {/* 先放置"上移"按钮 */}
      <Button
        icon="pi pi-angle-up"
        onClick={() => props.moveUp(props.selectedItem)}
        disabled={!props.selectedItem || props.isFirst(props.selectedItem)}
        className="p-button-secondary mb-2"
      />
      {/* 再放置"移到顶部"按钮 */}
      <Button
        icon="pi pi-angle-double-up"
        onClick={() => props.moveTop(props.selectedItem)}
        disabled={!props.selectedItem || props.isFirst(props.selectedItem)}
        className="p-button-secondary mb-2"
      />
      {/* 保留原有"下移"和"移到底部"按钮 */}
      <Button
        icon="pi pi-angle-down"
        onClick={() => props.moveDown(props.selectedItem)}
        disabled={!props.selectedItem || props.isLast(props.selectedItem)}
        className="p-button-secondary mb-2"
      />
      <Button
        icon="pi pi-angle-double-down"
        onClick={() => props.moveBottom(props.selectedItem)}
        disabled={!props.selectedItem || props.isLast(props.selectedItem)}
        className="p-button-secondary"
      />
    </div>
  );
};

3. 在OrderList组件中引用该模板：

<OrderList
  dataKey="id"
  value={products}
  onChange={(e) => setProducts(e.value)}
  itemTemplate={itemTemplate}
  header="Products"
  controlsTemplate={controlsTemplate} // 添加自定义控制栏模板
/>

方案对比 #

• CSS方案：实现简单，无需修改组件逻辑，但依赖组件默认DOM结构，若PrimeReact版本更新调整了DOM结构可能失效。
• 自定义控制栏方案：完全可控，不受组件版本更新影响，适合需要长期维护的项目，还可按需修改按钮样式、添加额外功能。

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