Tengo una tabla simple de BootstrapVue.
El CSS se define en App.vue . Aquí está el código para App.vue .
<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png"> --> <TestTable msg="testing"/> </div> </template> <script> import TestTable from './components/TestTable.vue' export default { name: 'App', components: { TestTable } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> Aquí está el código para TestTable.vue .
<template> <div> <b-table striped hover :items="items"></b-table> </div> </template> <script> export default { data() { return { items: [ { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { age: 21, first_name: 'Larsen', last_name: 'Shaw' }, { age: 89, first_name: 'Geneva', last_name: 'Wilson' }, { age: 38, first_name: 'Jami', last_name: 'Carney' } ] } } } </script> El margin-top: 60px se define en App.vue . Quiero modificar TableTest.vue para que anule el margen superior en el CSS en App.vue . Quiero margin-top: 0px para TableTest.vue .
Estoy usando Vue v2.6 y Bootstrap-vue.
Quiero modificar TableTest.vue para que anule el margen superior en el CSS en App.vue
Anteriormente comenté sobre su pregunta de que aplicó margin-top: 60px en su componente principal y el componente secundario tiene su propio modelo de caja.
Agregar un fragmento de código para mostrar cómo se estructuró su componente:
Vue.component('item', { template:'#list-template', props:['item'], }); var vm = new Vue({ el:"#app", computed: { limitedItems() { return ['item1']; } } }); #app { border: 2px solid black; margin-top: 60px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <item v-for="item in limitedItems" :item="item" style="border: 2px solid green"></item> </div> <template id="list-template"> <p>{{ item }}</p> </template>puedes probar margin-top: -60px;
Simplemente use
<style> #app { margin-top: 0; } </style> En su archivo TestTable.vue y sobrescribirá la regla css anterior dado que ambas etiquetas <style> no tienen alcance.