Question

我有以下从API返回的数据

let data = [
   {
    'doodle': 123,
    'moodle': 456,
    'link': 'wfw6f3gefvdf6w'
   },
    {
    'doodle': 123,
    'moodle': 496,
    'link': 'wsvsdvsd6fw7f6w'
  },
    {
    'doodle': 123,
    'moodle': 459,
    'link': 'wfw6fvsvf6w'
  },
    {
    'doodle': 123,
    'moodle': 406,
    'link': 'wfw6fvvfvf6w'
  }
]

显示在下表中，

<div>
    <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="journeyTable"></b-pagination>
    <p class="mt-3">Current Page: {{ currentPage }}</p>
    <div class="row">
        <div class="col-12">
            <card :title="title" :subTitle="subTitle">
                <div slot="raw-content" class="table-responsive">
                    <b-table id="my-table" :items="data" :per-page="perPage" 
                    :current-page="currentPage" striped hover small></b-table>
                </div>
            </card>
        </div>
    </div>
</div>

我正在考虑将数据的“链接”部分更改为重定向到指定URL的图标。如何在Bootstrap中实现？我已经使用vuetify一段时间了，弄乱模板和字段让我头疼。

Answer 1

使用文档中提到的named scoped slots：

<b-table
 id="my-table"
 :items="data"
 :per-page="perPage"
 :current-page="currentPage"
 striped
 hover
 small
>
  <!-- "link" is the name of the field in your data/fields -->
  <template slot="link" slot-scope="{ value }">
    <!-- this is just making a regular link -->
    <a href="`/some/util/${value}`">{{ value }}</a>
    <!-- or you could make an actionable badge -->
    <b-badge href="`/some/util/${value}`">{{ value }}</b-badge>
    <!-- or you could make an button with an icon/symbol -->
    <b-button href="`/some/util/${value}`">⇨</b-button>
  </template>
</b-table>

如果使用vue-router，并且链接位于您的应用本地，则在to，href上使用b-button属性代替b-badge属性，或者b-link等

显示重定向到链接的图标，而不是bootstrap-vue表中的数据值

1 个答案: