Primevue 数据表具有动态列和列分组，向下滚动时网格线消失

Question

我正在使用带有动态列和列分组的 PrimeVue DataTable。

当表格刚刚加载时，网格线看起来很好，列冻结，可滚动，一切都按预期工作。

但一旦我开始向下滚动，网格线就会表现出奇怪的行为，例如消失

下面是我的代码片段

如有任何帮助，我们将不胜感激。

<DataTable
  v-if="crSummaryList.length > 0"
  scrollable
  scrollHeight="700px"
  showGridlines
  stripedRows
  :value="crSummaryList"
  paginator
  :rows="25"
  :rowsPerPageOptions="[25, 50, 75, 100]"
  tableStyle="min-width: 50rem; white-space: nowrap;"
  style="font-size: 13px"
>
                            <ColumnGroup type="header">
                                <Row>
                                    <Column v-for="col of colsListCom.filter(col => col.index < 23)" :key="col.field"
                                        :field="col.field" :header="col.header" :frozen="col.frozen" :rowspan="3"
                                        class="text-center">
                                    </Column>
                                    <!-- KK SCH AND AMT HEADER  -->
                                    <Column v-for="col of colsListCom.filter(col => col.index == 23)"
                                        style="min-width: 12rem" :header="'Current KK ' + currentKKPlanID" :rowspan="2"
                                        :colspan="2">
                                    </Column>
                                    <!-- DYNAMIC COLUMN HEADER -->
                                    <Column v-for="col of colsListDynamicHeaderCom" style="min-width: 12rem" :header="col"
                                        :colspan="4">
                                    </Column>
                                    <Column header="Total" :colspan="4" alignFrozen="right">
                                    </Column>
                                </Row>
                                <Row>
                                    <Column v-for="col of colsListDynamicHeaderPlanIDCom" style="min-width: 12rem"
                                        :header="col" :colspan="2"></Column>
                                    <Column :header="selectedPlanId" colspan="2" />
                                    <Column :header="selectedPlanIdToCompare" colspan="2" />
                                </Row>
                                <Row>
                                    <Column v-for="col of colsListCom.filter(col => col.index >= 23)" :key="col.field"
                                        :field="col.field" :frozen="col.frozen"
                                        :header="col.header.includes('Qty') ? 'Qty' : 'Amt'">
                                    </Column>
                                </Row>
                            </ColumnGroup>
                            <Column v-for="col of colsListCom" :key="col.field" :field="col.field" :header="col.header"
                                :frozen="col.frozen">
                                <template #body="slotProps">
                                    <div :class="col.header.toLowerCase().includes('amt') ? 'text-end' : ''">
                                    {{  
                                    !slotProps.data[col.header] ? slotProps.data[col.header]
                                    : col.header.toLowerCase().includes('amt') ? numberWithCommasAndDollarSign(slotProps.data[col.header])
                                    : col.header.toLowerCase().includes('qty') ? numberWithCommas(slotProps.data[col.header]) 
                                    : slotProps.data[col.header] 
                                }}
                                </div>
                                </template>
                            </Column>
                        </DataTable>

Answer 1

感谢 Moritz Ringler 分享的链接

下面是解决方案

.p-datatable table {
    border-collapse: separate;

    .p-column-header-content {
        text-align: center;
        justify-content: center;
    }
}