Enzo Vaz

Pessoal preciso de uma ajuda, agradeço desde já! Estou tentado tirar um print da tabela, somente ela, pois quando tiro print sai a tela inteira como header, menu, etc. Alguém sabe como faz ? <template> <div class ="consulta-register-aparelho"> <h1> Consulta Componente</h1> //Esses metodos não deram certo <form> <a class="btn btn-success" href="javascript:window.print()">Print</a> <input type = "button" value = "Imprima esta página" onClick = "window.print ()" > </form> <b-col lg="6" class="my-1"> <b-form-group label="Filter" label-cols-sm="3" label-align-sm="right" label-size="sm" label-for="filterInput" class="mb-0" > <b-input-group size="sm"> <b-form-input v-model="filter" type="search" id="filterInput" placeholder="Digite para procurar!" ></b-form-input> <b-input-group-append> <b-button :disabled="!filter" @click="filter = ''">Clear</b-button> </b-input-group-append> </b-input-group> </b-form-group> </b-col> <div id="div1"> <b-table hover striped :items="responsaveis" :fields="fields" :filter="filter" :print="print"> </b-table> </div> </div> </template> <script> import { baseApiUrl } from '@/global' import axios from 'axios' export default { name: 'RegisterResponsavel', data: function() { return { mode: 'save', responsavel: {}, responsaveis: [], fields: [ { key: 'id', label: 'Código', sortable: true }, { key: 'nome', label: 'Nome', sortable: true }, { key: 'email', label: 'Email', sortable: true }, { key: 'nome_local', label: 'Localização', sortable: true} ], } }, methods: { loadResponsaveis() { const url = `${baseApiUrl}/responsaveis` axios.get(url).then(res => { this.responsaveis = res.data }) }, onFiltered(filteredItems) { // Trigger pagination to update the number of buttons/pages due to filtering this.totalRows = filteredItems.length this.currentPage = 1 }, loadResponsavel(responsavel, mode = 'save') { this.mode = mode this.responsavel = { ...responsavel } } }, mounted() { this.loadResponsaveis() } } </script> <style> </style>

Pessoal estou tentando imprimir um relatório com os dados de uma tabela, mas quando eu utilizo esse comando: <b-button variant="primary" value="Print this page" onClick="window.print()" >Salvar</b-button> ele tira print de tudo, estou utilizando vue. Agradeço desde já! -Enzo

Seria exatamente isso , ai caso selecionar funcionários, localhost:8080/registros/funcionarios, caso seleciona-se localhost:8080/registros/localizacao!

Não funcionou pessoal, utilizando da mesma forma não, acho que tem que usar de outra forma com vue-router

sim, mas estou usando para todas as guias do sistemas, não sei se funciona com abas de tabs, teria como usa-lá ?? /* Rotas do sistema para linkar em cada página */ import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/components/home/Home' import TelaRegister from '@/components/register/TelaRegister' import TelaCadastro from '@/components/cadastro/TelaCadastro' import TelaConsultaRegister from '@/components/consultaRegister/TelaConsultaRegister' import TelaConsultaCadastro from '@/components/consultaCadastro/TelaConsultaCadastro' import TelaGestao from '@/components/gestao/TelaGestao' import AdminPages from '@/components/admin/AdminPages' import Auth from '@/components/auth/Auth' import { userKey } from '@/global' Vue.use(VueRouter) const routes = [{ name: 'home', path: '/', component: Home },{ name: 'TelaGestao', path: '/gestao', component: TelaGestao },{ name: 'TelaRegister', path: '/registro', component: TelaRegister },{ name: 'TelaCadastro', path: '/cadastro', component: TelaCadastro },{ name: 'TelaConsultaRegister', path: '/consulta.register', component: TelaConsultaRegister },{ name: 'TelaConsultaCadastro', path: '/consulta.cadastro', component: TelaConsultaCadastro },{ name: 'adminPages', path: '/admin', component: AdminPages, meta: { requiresAdmin: true } }, { name: 'auth', path: '/auth', component: Auth }] const router = new VueRouter({ mode: 'history', routes }) router.beforeEach((to, from, next) => { const json = localStorage.getItem(userKey) if(to.matched.some(record => record.meta.requiresAdmin)) { const user = JSON.parse(json) user && user.admin ? next() : next({ path: '/' }) } else { next() } }) export default router

@Leonardo0308 @brund321 desculpa pessoal , é assim, quando o usuário cadastra algo no sistema a página automaticamente já da um reload na página, mas como a tabela está na mesma rota ele volta pro primeiro componente(aba), gostaria que quando ele cadastra-se, ele continua-se na mesma aba! segue imagem de exemplo. Agradeço a ajuda desde já!

Queria adicionar um URL em cada TAB, ( UM EXEMPLO , usuário atualiza a página e ainda continua na mesma página). <template> <div class="tela-register"> <PageTitle icon="fa fa-desktop" main =" Registros dos Componentes TI" sub="Infraestrutura de TI" /> <div class="tela-register-tabs"> <!-- b tem referencia com bootstrap + vue--> <b-card no-body> <b-tabs card> <b-tab title="Contrato"> <RegisterContrato /> </b-tab> <b-tab title="Modelos"> <TelaModelo/> </b-tab> <b-tab title="Computador"> <RegisterComputador /> </b-tab> <b-tab title="Monitor"> <RegisterMonitor /> </b-tab> <b-tab title="Aparelho"> <RegisterAparelho /> </b-tab> <b-tab title="Projetor"> <RegisterProjetor /> </b-tab> </b-tabs> </b-card> </div> </div> </template> <script> import PageTitle from '../template/PageTitle' import RegisterAparelho from './RegisterAparelho' import RegisterComputador from './RegisterComputador' import RegisterContrato from './RegisterContrato' import RegisterMonitor from './RegisterMonitor' import RegisterProjetor from './RegisterProjetor' import TelaModelo from './TelaModelo' export default { name: 'TelaRegister', components: { PageTitle, RegisterAparelho, RegisterComputador, RegisterContrato, RegisterMonitor, RegisterProjetor, TelaModelo} } </script> <style> </style>