Vue Bootstrap 是一個(gè)基于 Vue.js 和 Bootstrap 的 UI 庫，提供了大量的組件與功能，其中包括數(shù)據(jù)展示的表格組件。在本文中，我們將介紹如何使用 Vue Bootstrap 中的表格組件進(jìn)行數(shù)據(jù)展示，并根據(jù)需要進(jìn)行自定義。

首先，我們需要引入 Vue 和 Bootstrap，以及 Vue Bootstrap 的表格組件。可以通過 CDNs 引入它們：

<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" >
<!-- 引入 Vue Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/vue-bootstrap@3.0.0-beta.4/dist/bootstrap-vue.min.js"></script>

在引入之后，我們可以使用表格組件。以下是一個(gè)簡單的使用示例：

<b-table
:items="items"
:fields="fields"
></b-table>

其中，items是一個(gè)數(shù)組，包含了要展示的數(shù)據(jù)，fields是一個(gè)數(shù)組，包含了表格的列信息。比如：

data() {
return {
items: [
{ id: 1, name: 'John Doe', age: 30 },
{ id: 2, name: 'Jane Doe', age: 25 },
{ id: 3, name: 'Bob Smith', age: 40 },
],
fields: [
{ key: 'id', label: 'ID' },
{ key: 'name', label: 'Name' },
{ key: 'age', label: 'Age' },
],
};
}

這個(gè)示例中，我們展示了一個(gè)包含了三列的表格，每一列的數(shù)據(jù)對(duì)應(yīng)數(shù)組中的一個(gè)屬性。通過key屬性指定了屬性名稱，通過label屬性指定了列展示的名稱。

除了基本的數(shù)據(jù)展示，Vue Bootstrap 的表格組件還提供了豐富的功能，如排序、分頁、篩選等。我們可以通過相應(yīng)的屬性與方法來進(jìn)行設(shè)置和操作。具體使用方法可以參考 Vue Bootstrap 官方文檔。