如何在BootstrapVue的b表中显示空行

b09cbbtk 于 2023-03-24 发布在 Vue.js

关注(0)|答案(4)|浏览(226)

我使用的是BootstrapVue的b-table。然而，当我的表的对象数组为空时，我想显示表头+ 1个空行，表的单元格中没有任何文本。
在BoostrapVue的b-table页面上，有一些关于为空表显示内容的解释，但我没有遵循解释。结果也没有可视化。当使用show-empty时，它给出了一个简单的文本'no records...'，但我不想要这个文本。或者我想要一个自定义文本（取决于使用i18 n时的语言）。
目前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:''}],

但我猜应该有更好的方法（+这个变通方法给出了一个高度小于实际填充行的行）

vue.js

来源：https://stackoverflow.com/questions/67298414/how-to-show-an-empty-row-in-bootstrapvues-b-table

4条答案

按热度按时间

ljo96ir51#

你可以使用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>

赞(0）回复(0）举报 2023-03-24

t40tm48m2#

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

<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>

赞(0）回复(0）举报 2023-03-24

piztneat3#

由于您希望呈现实际的单元格，因此可以使用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>

赞(0）回复(0）举报 2023-03-24

xsuvu9jc4#

“ Bootstrap 版本”：“2.21.1”
“vue”：“2.x”

const formatter = (value) => value ? value : '---'
    const tableColumns = [
        { key: 'name', formatter: value => formatter(value) },
        { key: 'color', formatter: value => formatter(value) },
        { key: 'age', formatter: value => formatter(value) },
        { key: 'sex', formatter: value => formatter(value) }
    ]

赞(0）回复(0）举报 2023-03-24

我来回答

如何在BootstrapVue的b表中显示空行

4条答案

相关问题

热门标签

最新问答