我试图通过BootrapVue同时使用buefy的b表组件。我猜想BootstrapVue也有一个名为b-table的组件,这导致了冲突并导致buefy的表无法正常工作。当我删除BootstrapVue时,Buefy表正确显示。我是新手,我不确定如何解决这样的命名空间冲突,甚至可能解决。
main.js
import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
Vue.use(Buefy)
MetadataTable.js
<template>
<div>
<!-- BootstrapVue -->
<b-modal id="metadata-modal" title="Metadata" size="lg">
<p class="my-4">
<table style="text-align:left">
<tbody>
<tr v-for="(value,key) in current_metadata">
<td style="vertical-align:top;font-weight:bold;">{{key}} </td>
<td><code><pre>{{JSON.stringify(value, null, 2)}}</pre></code></td>
</tr>
</tbody>
</table>
</p>
</b-modal>
<!-- Buefy -->
<b-table
:data="data"
paginated
>
<template slot-scope="props">
<b-table-column field="metadata.title" label="Title" sortable>
{{ props.row.metadata.title }}
</b-table-column>
</template>
</b-table>
</div>
</template>
答案 0 :(得分:1)
您只能从BootstrapVue
导入项目所需的特定模块,而不是导入所有bootstrap-vue组件:
import bModal from 'bootstrap-vue'
import bAlert from 'bootstrap-vue'
Vue.component('b-modal', bModal)
Vue.component('b-alert', bAlert)
希望它可以解决b-table
冲突。