BootstrapVue 和 VueJS 中的布尔显示值

Question

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

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

我找到了一种方法来做到这一点，使用我可以在此处阅读的内容。确实可以定义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