[Vuejs]-Formatter column – Bootstrap-vue – VueJS

by

3👍

✅

You can use the formatter function on your two fields to achieve this.

The formatter will be run on each row and receives the value of the cell, in this case the code. That you can then use to find the object in your backend data you want, and return the description.

More info about the formatter can be found under the field definition reference on the Bootstrap-Vue documentation.

https://bootstrap-vue.org/docs/components/table#field-definition-reference

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { date: '01/01/2008', from: '1', to: '2', city: 'Paris' },
        { date: '06/03/2018', from: '3', to: '1', city: 'New York' },
        { date: '05/06/2012', from: '3', to: '2', city: 'Tokyo' },
        { date: '07/08/2019', from: '2', to: '3', city: 'Paris' },
        { date: '07/08/2019', from: '2', to: '4', city: 'Copenhagen' }
      ],
      fields: [
        { key: 'date', label: 'Date', sortable: true },
        { key: 'from', label: 'From', sortable: true, formatter: 'getDescription'},
        { key: 'to', label: 'To', sortable: true, formatter: 'getDescription'},
        { key: 'city', label: 'City', sortable: true }
      ],
      dataBackend: [
        { code: 1, description: 'Joel' },
        { code: 2, description: 'Maria' },
        { code: 3, description: 'Lucas' }
      ]
    }
  },
  methods: {
    getDescription(code) {
      const data = this.dataBackend.find(data => data.code == code)
      return data ? data.description : code;
    }
  }
})
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.14.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.14.0/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-table hover striped small outlined :items="items" :fields="fields">
  </b-table>
</div>
👤Hiws

Leave a comment