如何使用带有单元格模板的 bootstrap-vue 表

Question

我正在使用bootstrap-vue ，特别是允许使用模板进行自定义数据呈现的b-table功能。 无论我尝试什么，我都会收到一个错误，抱怨该行的数据道具无法识别。

首先，没有模板，它可以按预期工作（使用文档中的示例代码逐字）......

 Vue.config.productionTip = false; var app = new Vue({ el: '#app', data: { fields: [ { key: 'age', label: 'Old' }, { key: 'first_name', label: 'Given Name' }, { key: 'last_name', label: 'Surname' }, ], 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' } ] } })

 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> <div id="app"> <div> <b-table striped small :items="items" :fields="fields"> </b-table> </div> </div>

现在在这里，同样的事情，除了为其中一列添加一个<template> ......

 Vue.config.productionTip = false; var app = new Vue({ el: '#app', data: { fields: [ { key: 'age', label: 'Old' }, { key: 'first_name', label: 'Given Name' }, { key: 'last_name', label: 'Surname' }, ], 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' } ] } })

 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> <div id="app"> <div> <b-table striped small :items="items" :fields="fields"> <!-- here's the problem: why is "data" not recognized? --> <template #cell(name)="data"> <h3 class="text-info">The AGE IS: {{ data.value.age }}</h3> </template> </b-table> </div> </div>

为什么无法识别数据道具？ 我得到错误：

[Vue 警告]：属性或方法“数据”未在实例上定义，但在渲染期间被引用。

我的理解是它是一种包含行数据的虚拟变量，我可以随意调用它（只要模板中的代码使用相同的名称）。 我尝试了几种变体，但都没有运气。

Answer 1

bootstrap-vue@latest/dist/bootstrap-vue.min.js适用于 Vue3，所以只需切换到 bootstrap-vue 的版本 2：

 Vue.config.productionTip = false; var app = new Vue({ el: '#app', data: { fields: [ { key: 'age', label: 'Old' }, { key: 'first_name', label: 'Given Name' }, { key: 'last_name', label: 'Surname' }, ], 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' } ] } })

 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> <div id="app"> <div> <b-table striped small :items="items" :fields="fields"> <template #cell(age)="{ item }"> <h3 class="text-info">The AGE IS: {{ item.age }}</h3> </template> </b-table> </div> </div>

Answer 2

您应该在字段中有单元格，您的字段中不存在“名称”。

您可以使用 first_name：

<template #cell(first_name)="data">
        <h3 class="text-info">The AGE IS: {{ data.value.age }}</h3>
        
</template>

或在字段中添加名称：

fields: [
      { key: 'name', label: 'Name' },
      { key: 'age', label: 'Old' },
      { key: 'first_name', label: 'Given Name' },
      { key: 'last_name', label: 'Surname' },
    ],