vue b-table 将一列改成链接

Question

我对 vue 非常陌生，对于这个项目，我使用 Vue、Bootstrap-vue 来对我的数据 teamList 进行分页。有没有办法可以将 teamList.first_name 更改为链接，以便在用户单击 first_name 值后我可以使用 onSelect or onClick 事件。

JsFiddle 上的代码 = https://jsfiddle.net/ujjumaki/aLdgo7xq/8/

查看

<div class="overflow-auto">
    <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
    <p class="mt-3">Current Page: {{ currentPage }}</p>
    <b-table id="my-table" :items="teamList" :per-page="perPage" :current-page="currentPage" medium selectable>
    </b-table>
</div>

JavaScript

data(){
  return{
    teamList: [
          { id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
          { id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
          { id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
          { id: 8, first_name: 'Rockhead', last_name: 'Slate' },
          { id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
    ],
    perPage: 2,
    currentPage: 1
    }
},

计算

computed: {
    rows() {
       return this.teamList.length
    }
},

Answer 1

<b-table id="my-table" :items="teamList" :per-page="perPage" :current-page="currentPage" medium>
  <template #cell(first_name)="data">
    <a href="#" @click="functionName">{{data.value}}</a>
  </template>
</b-table>