Question

I m 采用有活力的栏目和栏目分类的元数据。

当表格刚装满时,电网将按预期运行。

But as soon as I start scrolling down, the gridlines will show weird behavior, such as disappearing

我的法典如下:

感谢任何帮助。

<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;
    }
}

友情链接