BootstrapVue 和 VueJS 中的布尔显示值

Question

在我的项目中，我使用了 BootstrapVue 和 VueJS。我目前正在做一个 b-table 并且我在它的字段中有一个布尔字段。它正确显示 true 和 false，但我想显示其他内容（例如：Active 代表 true 和 Inactive 代表 false ).我还没有找到任何关于如何做到这一点的信息（如果有内置的东西，我还没有在文档中看到它）。这是我当前对 BootstrapVue 的 b-table 的字段声明：

table_fields: [
  { key: 'username', sortable: true },
  { key: 'firstName', sortable: true },
  { key: 'lastName', sortable: true },
  { key: 'isActive', sortable: true, label: 'Status'},
  { key: 'actions', label: 'Actions' }
]

我想更改其行为的字段是 isActive。

提前感谢您的提示！ :)

Answer 1

我找到了一种方法，使用我可以阅读的内容 HERE。确实可以定义 custom slots.

最后我的字段声明如下所示：

table_fields: [
  { key: 'username', sortable: true },
  { key: 'firstName', sortable: true },
  { key: 'lastName', sortable: true },
  { key: 'isActive', sortable: true, label: 'Status' },
  { key: 'actions', label: 'Actions' }
]

自定义广告位的小片段：

<template v-slot:cell(isActive)="row">
  <b-badge
    v-if="row.item.isActive"
    variant="success">
    Active
  </b-badge>
  <b-badge
    v-else
    variant="warning">
    Archived
  </b-badge>
</template>

和我的整个 b-table :

<b-table
  hover
  :items="users"
  :fields="table_fields">
  <template v-slot:cell(isActive)="row">
    <b-badge
      v-if="row.item.isActive"
      variant="success">
      Active
    </b-badge>
    <b-badge
      v-else
      variant="warning">
      Archived
    </b-badge>
  </template>
  <template v-slot:cell(actions)="row">
    <span v-if="row.item.isActive">
      <b-button
        to="#"
        size="sm"
        variant="primary"
        class="mr-1"
        title="Edit">
        <font-awesome-icon :icon="['fas', 'pen']"/>
      </b-button>
      <b-button
        @click="archiveUser(row.item.id)"
        size="sm"
        class="mr-1"
        title="Archive">
        <font-awesome-icon :icon="['fas', 'archive']"/>
      </b-button>
    </span>
    <b-button
      v-else
      @click="unarchiveUser(row.item.id)"
      variant="success"
      size="sm"
      class="mr-1"
      title="Unarchive">
      <font-awesome-icon :icon="['fas', 'caret-square-up']"/>
    </b-button>
    <b-button
      @click="deleteUser(row.item.id)"
      size="sm"
      variant="danger"
      class="mr-1"
      title="Delete">
      <font-awesome-icon :icon="['fas', 'trash-alt']"/>
    </b-button>
  </template>
</b-table>

以及它的外观：

您可以看到在 Status 列中显示 b-badge 而不是 true 或 false

BootstrapVue 和 VueJS 中的布尔显示值

Boolean display value in BootstrapVue and VueJS

vue.js

bootstrap-vue