PrimeVue DataTable：如何将可排序图标移至表头单独一行？

当然可以实现，下面给你两种实用的方法：

方法一：用CSS全局调整 #

直接通过自定义样式修改表头布局，让文字和排序图标垂直排列：

/* 让表头单元格内容垂直分布 */
.p-datatable .p-sortable-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* 给图标加一点上边距，和文字分开 */
.p-datatable .p-sortable-column-icon {
  margin-top: 4px;
}

这种方法简单高效，一次修改就能作用于所有带排序功能的表头列。

方法二：自定义表头模板（针对单个列） #

如果只想给特定列做调整，用header插槽完全自定义表头结构：

<Column field="code" sortable style="width: 20%">
  <template #header>
    <div style="display: flex; flex-direction: column; align-items: center;">
      <span>Code</span>
      <!-- 排序图标会自动渲染，无需手动添加图标元素 -->
    </div>
  </template>
</Column>

用模板的好处是可以精准控制每一列的表头样式，比如调整文字和图标的间距、对齐方式等。

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