[Vuejs]-How can i link b-table(bootstrap-vue) elements?

by

0👍

You can use slots to customize your b-table. I prepared a code snippet to show you how you can add a detail button in your table and redirect the user to a new page after clicking on it.

new Vue({
  el: '#app',
  data() {
    return {
      fields: ['id', 'name', 'status', 'details'],
      items: [{
          id: 1,
          name: "Taylor",
          status: "passive"
        },
        {
          id: 2,
          name: "Tom",
          status: "passive"
        },
        {
          id: 3,
          name: "Arthur",
          status: "passive"
        },
      ]
    }
  },
  methods: {

  },
  mounted() {},



})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table bordered id="my-table" striped hover :items="items" :fields="fields">
    <template #cell(details)="row">
      <b-link :to="`/items/${row.item.id}`">Details</b-link>
    </template>
  </b-table>
</div>

Leave a comment