PrimeVue DataTable双向滚动时列与表头对齐不一致问题求解

修复方案 #

• 1. 统一设置列宽+禁止表头换行
     给所有<Column>组件指定固定宽度，同时添加全局CSS强制表头文字不换行，避免表头撑开宽度和内容列不一致：

<Column field="field1" header="Service" style="min-width: 200px; width: 200px"/>

对应的CSS：

.p-datatable-thead > tr > th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

• 2. 强制表格使用固定布局算法
     双向滚动场景下，DataTable的表头和内容是两个独立的<table>元素，默认自动布局容易出现宽度计算偏差，给DataTable添加自定义类后强制固定布局即可：

<DataTable
  :value="someValue"
  responsiveLayout="scroll"
  :scrollable="true"
  scrollDirection="both"
  class="p-datatable-lg fixed-datatable"
  scrollHeight="500px"
>

对应的CSS：

.fixed-datatable .p-datatable-table {
  table-layout: fixed !important;
}

• 3. 组件挂载后手动触发表格重绘
     如果上述方案调整后还有轻微偏移，可在组件挂载完成后调用DataTable实例的reset()方法，强制重新计算所有列宽：

// Vue2 写法
mounted() {
  this.$refs.dt.reset()
}

// Vue3 写法
const dt = ref()
onMounted(() => {
  dt.value?.reset()
})

需要先给DataTable添加ref="dt"属性绑定实例。

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