BootstrapVueのテーブルにリンクを埋め込む方法

BootstrapVueのテーブルb-tableタグにリンクを埋め込む方法です。

完成品

<b-table  :items="items3">
      <template v-slot:cell(link)="data">
        <router-link to="/work">
          <a href="#" v-on:click="openLinkInNewTab(data.value.url)">{{ data.value.name}}</a>
        </router-link>
      </template>
    </b-table>

<script>
export default {
  data: function () {
    return {
      items3: [
        { 
          link: {
            name: 'google',
            url: 'https://www.google.com/'
          },
          msg: 'googleへのリンクです'
         },
        { 
          link: {
            name: 'yahoo',
            url: 'https://www.yahoo.co.jp/'
          },
          msg: 'yahooへのリンクです'
         }
      ]
    }
  },
  methods: {
    openLinkInNewTab (url) {
      window.open(url, '_blank')
    },
  }
}
</script>

b-tableの基本

<b-table  :items="items1">
</b-table>


<script>
export default {
  data: function () {
    return {
      items1: [
        {
          name: 'hoge',
          msg:  'hogeメッセージです'
        },
        {
          name: 'fuga',
          msg:  'fugaメッセージです'
        }
      ]
    }
  }
}
</script>

簡単なb-tableタグの使い方です。

テーブルの部分<b-table :items="items1">は<b-table v-bind:items="items1">の省略記法です。

とりあえずリンクを埋め込む

<b-table  :items="items2">
  <template v-slot:cell(url)="data">
    <a :href="data.value" >{{ data.value}}</a>
  </template>
</b-table>

<script>
export default {
  data: function () {
    return {
      items2: [
        { 
          url: 'https://www.google.com/',
          msg: 'googleへのリンクです'
         },
        { 
          url: 'https://www.yahoo.co.jp/',
          msg: 'yahooへのリンクです'
         }
      ]
    }
  }
}
</script>

この時<template v-slot:cell(url)="data">はテーブルのurlカラムのセルにdataを紐付けるようである。dataとは何かというとitemsの配列の要素一つ一つのことを指すようである。
{{ data.value}}を{{ data}}に変更すると下の通り、dataの構造がわかる。

{
    "item": {
        "url": "https://www.google.com/",
        "msg": "googleへのリンクです"
    },
    "index": 0,
    "field": {
        "key": "url",
        "label": "Url"
    },
    "unformatted": "https://www.google.com/",
    "value": "https://www.google.com/",
    "detailsShowing": false,
    "rowSelected": false
}

そのため先程のコードを下記のとおりに変更しても同様の挙動をする

<b-table  :items="items2">
  <template v-slot:cell(url)="{item}">
    <a :href="item.url" >{{ item.url}}</a>
  </template>
</b-table>

リンクの表示名を変更する

<b-table  :items="items3">
  <template v-slot:cell(link)="data">
    <a :href="data.value.url" >{{ data.value.name}}</a>
  </template>
</b-table>

<script>
export default {
  data: function () {
    return {
      items3: [
        { 
          link: {
            name: 'google',
            url: 'https://www.google.com/'
          },
          msg: 'googleへのリンクです'
         },
        { 
          link: {
            name: 'yahoo',
            url: 'https://www.yahoo.co.jp/'
          },
          msg: 'yahooへのリンクです'
         }
      ]
    }
  }
}
</script>

先程の状態からitemsに紐付ける配列の構造を少し変更するだけで簡単にaタグの表示名を変更できる。

リンク先を新しいタブで開く

先ほどと画面の見た目は変わらないが、リンクをクッリクした際に新しいタブで表示する。

<b-table  :items="items3">
  <template v-slot:cell(link)="data">
    <router-link to="/hoge">
      <a href="#" v-on:click="openLinkInNewTab(data.value.url)">{{ data.value.name}}</a>
    </router-link>
  </template>
</b-table>

<script>
export default {
  data: function () {
    return {
      items3: [
        { 
          link: {
            name: 'google',
            url: 'https://www.google.com/'
          },
          msg: 'googleへのリンクです'
         },
        { 
          link: {
            name: 'yahoo',
            url: 'https://www.yahoo.co.jp/'
          },
          msg: 'yahooへのリンクです'
         }
      ]
    }
  },
  methods: {
    openLinkInNewTab (url) {
      window.open(url, '_blank')
    },
  }
}
</script>

この際<router-link to="/hoge">を使用しないとhref="#"のせいで、もとのタブは別画面に遷移してしまう

参考

• https://stackoverflow.com/questions/58474034/how-to-get-item-value-in-v-slotcell-template-of-b-table-bootstrapvue