melhoria na tabela

dist/types/componentes/EliTabela/EliTabela.vue.d.ts

@@ -48,6 +48,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     }[]>;
     temAcoesCabecalho: import("vue").ComputedRef<boolean>;
     temAcoes: import("vue").ComputedRef<boolean>;
+    totalColunas: import("vue").ComputedRef<number>;
     colunasEfetivas: import("vue").ComputedRef<any[]>;
     rotulosColunas: import("vue").ComputedRef<string[]>;
     modalColunasAberto: import("vue").Ref<boolean, boolean>;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eli-vue",
-  "version": "0.1.89",
+  "version": "0.1.90",
   "private": false,
   "main": "./dist/eli-vue.umd.js",
   "module": "./dist/eli-vue.es.js",

src/componentes/EliTabela/EliTabela.vue

@@ -8,14 +8,6 @@
       <div>quantidadeTotal: {{ quantidade }}</div>
     </EliTabelaDebug>
 
-    <EliTabelaEstados
-      v-if="carregando || Boolean(erro) || !linhas.length"
-      :carregando="carregando"
-      :erro="erro"
-      :mensagemVazio="tabela.mensagemVazio"
-    />
-
-    <template v-else>
     <EliTabelaCabecalho
       v-if="exibirBusca || temAcoesCabecalho"
       :exibirBusca="exibirBusca"
@@ -55,7 +47,21 @@
         @alternar-ordenacao="alternarOrdenacao"
       />
 
+      <tbody v-if="carregando || Boolean(erro) || !linhas.length">
+        <tr>
+          <td :colspan="totalColunas" style="padding: 0;">
+            <EliTabelaEstados
+              :carregando="carregando"
+              :erro="erro"
+              :mensagemVazio="tabela.mensagemVazio"
+              style="border: none; border-radius: 0;"
+            />
+          </td>
+        </tr>
+      </tbody>
+
       <EliTabelaBody
+        v-else
         :colunas="colunasEfetivas"
         :colunasInvisiveis="colunasInvisiveisEfetivas"
         :temColunasInvisiveis="temColunasInvisiveis"
@@ -85,7 +91,6 @@
       :maximoBotoes="tabela.maximo_botoes_paginacao"
       @alterar="irParaPagina"
     />
-    </template>
   </div>
 </template>
 
@@ -331,6 +336,14 @@ export default defineComponent({
       return ordemFinal.map((r) => mapa.get(r)).filter(Boolean);
     });
 
+    const totalColunas = computed(() => {
+      return (
+        colunasEfetivas.value.length +
+        (temAcoes.value ? 1 : 0) +
+        (temColunasInvisiveis.value ? 1 : 0)
+      );
+    });
+
     function abrirModalColunas() {
       modalColunasAberto.value = true;
     }
@@ -745,6 +758,7 @@ export default defineComponent({
       acoesCabecalho,
       temAcoesCabecalho,
       temAcoes,
+      totalColunas,
       colunasEfetivas,
       rotulosColunas,
       modalColunasAberto,