PrimeVue 数据表可滚动标题未对齐

如何解决PrimeVue 数据表可滚动标题未对齐

当使用具有固定列宽的可滚动 PrimeVue 数据表（使用 px）时，结合 Bootstrap 网格，我得到了这种行为：

这个问题似乎只有在表格超过大约 5 行时才会发生，并且会反应性地发生（即，如果表格在页面加载时有 3 行并且添加了更多行，则标题将如上所示中断）。

这是我的 HTML（省略了不相关的部分，因此结构很奇怪）：

<html lang="en">
    <head></head>
    <body>
        <div>
            <div class="container-fluid">
                <div>
                    <div>
                        <div class="row no-gutters">
                            <div class="col-xs-12 col-sm-12 col-md-4">
                                <div class="row no-gutters p-2">
                                    <div class="custom-card">
                                        <div class="row no-gutters">
                                            <div class="col">
                                                <data-table></data-table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

我还使用了以下 CSS 类（包括覆盖的 PrimeVue CSS）：

.custom-card {
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  padding: 8px;
  width: 100%;
}

.p-filter-column,.p-datatable-row td,.p-datatable-emptymessage p {
  word-break: break-all !important;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  padding-left: 0.3rem !important;
  padding-right: 0.3rem !important;
}

.p-datatable-emptymessage p{
  margin-bottom: 0;
}

.p-datatable-emptymessage td{
  padding: 0 !important;
}

.p-datatable-header,.p-paginator-bottom,thead.p-datatable-thead tr th {
  word-break: break-all !important;
  padding: 0.3rem !important;
}

.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
  background: #6dbfd5 !important;
  border-color: #6dbfd5 !important;
  color: #ffffff;
}

.p-paginator .p-paginator-pages .p-paginator-page.p-highlight:hover {
  background: #31859c !important;
  border-color: #31859c !important;
  color: #ffffff;
}

.p-paginator,.p-paginator .p-paginator-last,.p-paginator .p-paginator-first,.p-paginator .p-paginator-next,.p-paginator .p-paginator-prev,.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight),.p-datatable .p-sortable-column.p-highlight,.p-sortable-column-icon {
  color: #212529 !important;
}

.p-paginator .p-paginator-pages .p-paginator-page,.p-paginator .p-paginator-prev {
  min-width: 1.8rem !important;
  height: 1.8rem !important;
}

解决方法

我没有确切的答案，但有一个宝贵的（我希望）建议： ==> 尽可能不要使用 PrimeVue 和引导程序。我在混合它们时遇到了奇怪的风格“冲突”，奇怪的行为。所以尝试用 PrimeVue 等价物替换 bootstap 的东西。这将首先简化您的问题。

PrimeVue 数据表可滚动标题未对齐

如何解决PrimeVue 数据表可滚动标题未对齐

解决方法

相关推荐