I need to remove a q-table__separator
component that is taking up unnecessary space in my table footer! It is a component inherited from Quasar, it was not added with code, it is part of the Quasar table! I know I could create a footer with CSS by hand, but before trying this approach I would like to maintain the standard of the system being developed, as there are many other similar tables in it!
P.s: I know that the 'botom' slot might be a more suitable option, but 'pagination' offers some items that are used in other system tables, so before making any radical changes to the default I would like to try modifying just the q-table__separator
if possible!
Here is the table:
<q-table dense ref="colunaRecebimentoTitulo" :key="keyTabelaRecebimentos" :columns="colunasRecebimentosTitulos" :row-key="(row) => recebimentos.indexOf(row)" style="background-color: #fafafa; overflow: auto" class="fixar-scroll-header scroll altura-tabela" :class="[
atribuiSombra ? 'atribui-sombra-th-left' : '',
atribuiSombraFuncoes ? 'atribui-sombra-td-right atribui-sombra-th-right' : ''
]" :data="recebimentos" :pagination.sync="pagination" selection="multiple" :selected.sync="recebimentosSelecionados" :visible-columns="visibleColumns">
<template v-slot:pagination="scope">
<!-- CONTAINER -->
<div class="container">
<!-- PAGINAÇÃO -->
<div class="paginacao">
<span> Pag: {{ scope.pagination.page }}</span>
</div>
<!-- BADGES -->
<div class="badges">
<q-badge />
<span style="font-weight: 500">A Vencer</span>
</div>
</div>
</template>
</q-table>
and here is what I tried to do from the style scope
<style scoped>
.fixar-scroll-header ::v-deep .q-table__bottom {
display: flex;
flex-wrap: nowrap;
flex-direction: row-reverse;
padding: 0px !important;
}
.q-table__separator {
display: none !important;
/* Esconde completamente */
width: 0 !important;
/* Remove espaço ocupado */
}
.container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}
.badges {
display: flex;
flex-wrap: nowrap;
}
.paginacao {
display: flex;
justify-content: right;
align-items: center;
flex-wrap: nowrap;
}
</style>
Here is the browser inspect: enter image description here