问题描述
当使用具有固定列宽的可滚动 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 的东西。这将首先简化您的问题。