Отображение значка, который перенаправляет на ссылку, вместо значения данных в таблице начальной загрузки - PullRequest
Новая
       24

Отображение значка, который перенаправляет на ссылку, вместо значения данных в таблице начальной загрузки

0 голосов
/ 10 июля 2019

У меня есть следующие данные, которые возвращаются из 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.Как это может быть достигнуто в начальной загрузке?Я уже некоторое время пользуюсь vuetify, и мне не хватает шаблонов и полей.

1 Ответ

0 голосов
/ 11 июля 2019

Используйте именованные слоты области действия , как указано в документации: 

<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 propвместо href реквизита b-button, b-badge или b-link и т. д.

...