如何在 BootstrapVue 的 b-table 中显示空行

Question

我正在使用来自 BootstrapVue 的 b-table。但是，当我的 table 的 objects 数组为空时，我想显示 table headers + 1 个空行，[ 的单元格中没有任何文本=35=].

在 BoostrapVue's b-table page 上，有一些关于为空 table 显示某些内容的解释，但我没有听从解释。也没有结果的视觉效果。使用 show-empty 时，它会给出一个简单的文本 'no records ...'，但我不想要该文本。或者也许我想要自定义文本（取决于使用 i18n 时的语言）。

所以 html 目前是：

<b-table bordered :head-variant="'light'" hover :items="dogs" :fields="dogHeaders" >
</b-table>

在 vue 数据中我有：

dogs: [], //because i want to mimic an empty table
dogHeaders: ['name','color','age'],

谁能举例说明如何做到这一点？

编辑：我目前只看到一种解决方法，即用空狗填充我的狗数组，如下所示：

dogs: [{name:'',color:'',age:''}],

但我想应该有更好的方法（+这个解决方法给出的行的高度小于实际填充的行）

Answer 1

我认为示例就在 docs 中。他们为这个用例提供了插槽，您可以在其中放置任何您想要的东西：

<b-table bordered :head-variant="'light'" hover :items="dogs" :fields="dogHeaders" show-empty>
    <template #empty="scope">
        Whatever HTML you put here will be shown when the table is empty
    </template>
</b-table>

Answer 2

您可以将 b-table 与 show-empty 属性和 slots 一起使用。我准备了一个代码片段来展示这一点：

new Vue({
  el: '#app',
  data: {
    dogs: [],
    dogHeaders: ['name', 'color', 'age'],
  }
})

<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-table bordered :head-variant="'light'" hover :items="dogs" :fields="dogHeaders" show-empty>
    <template #empty="scope">
        Empty row
    </template>
  </b-table>
</div>

Answer 3

由于要渲染实际的单元格，可以使用 top-row 槽而不是标准的 empty 槽。

然后，您可以根据 dogs 数组是否为空，使用 v-if 有条件地渲染插槽。然后在 dogHeaders 数组中的每个元素的插槽内渲染空单元格 (<td>)。

new Vue({
  el: '#app',
  data() { 
    return {
      dogs: [],
      dogHeaders: ['name', 'color', 'age']
    }
  },
  methods: {
    addRow() {
      this.dogs.push({
        name: 'Pence',
        color: 'Black',
        age: 53
      })
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>

<div id="app" class="p-3">
  <b-btn @click="dogs = []">Reset Table</b-btn>
  <b-btn @click="addRow">Add row</b-btn>
  <hr />
  <b-table bordered head-variant="light" hover :items="dogs" :fields="dogHeaders">
    <template #top-row v-if="dogs.length === 0">
      <!-- Adding &nbsp; to the cell so that it maintains the standard cell height -->
      <td v-for="i in dogHeaders.length">&nbsp;</td>
    </template>
  </b-table>
</div>

如何在 BootstrapVue 的 b-table 中显示空行

How to show an empty row in BootstrapVue's b-table

vue.js

vuejs2

bootstrap-vue