如何使用 Bootstrap-Vue 自定义空单元格值上的文本？

Question

我想要实现的是在每个空单元格值上加上“-”。像这样（参见“名称”行）：

我该怎么做？谢谢

Answer 1

如果使用 fields 属性，则可以使用添加格式化程序。在这里你可以创建一个方法，如果有 returns 你的名字，或者 - 如果有 none.

new Vue({
  el: '#app',
  data() {
    return {
      fields: [
        { key: "name", formatter: 'formatName' },
        { key: "age" }
      ],
      items: [
        { age: 40, name: 'Dickerson Macdonald' },
        { age: 21, name: '' },
        { age: 89, name: 'Geneva Wilson' },
        { age: 38, name: 'Jami Carney'}
      ]
    }
  },
  methods: {
    formatName(value) {
      return value || '-'
    }
  }
})

<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@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-table :items="items" :fields="fields"></b-table>
</div>

或者，您可以使用 slots 在模板中创建逻辑，或者在没有名称的情况下呈现其他内容。但如果它只是显示 -，我会坚持使用格式化程序。

new Vue({
  el: '#app',
  data() {
    return {
      fields: [
        { key: "name" },
        { key: "age" }
      ],
      items: [
        { age: 40, name: 'Dickerson Macdonald' },
        { age: 21, name: '' },
        { age: 89, name: 'Geneva Wilson' },
        { age: 38, name: 'Jami 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@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-table :items="items" :fields="fields">
    <template #cell(name)="{ value }">
      {{ value || '-' }}
    </template>
  </b-table>
</div>

如何使用 Bootstrap-Vue 自定义空单元格值上的文本？

How to customize the text on empty cell value using Bootstrap-Vue?

vue.js

bootstrap-vue