BootstrapVue 和 VueJS 中的布尔显示值

Posted 2023-02-22

【中文标题】BootstrapVue 和 VueJS 中的布尔显示值

【英文标题】：Boolean display value in BootstrapVue and VueJS

【发布时间】：2020-04-15 11:26:39

【问题描述】：

在我的项目中，我使用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。

提前感谢您的提示！ :)

【参考方案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' 
]

自定义插槽的小 sn-p ：

<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