格式化程序列-Bootstrap-vue-VueJS

Question

我需要将格式器应用于from和to列，以便将它们识别为表中显示的值，其描述而不是其代码。

<b-table id="my-table" hover striped small outlined :items="items" :fields="fields" class="mt-0 mb-0">
    <template slot="actions" slot-scope="data">
        <b-button variant="info" @click="viewMessage(data.item)" class="mr-2" size="sm">
            <i class="fa fa-envelope-open"> View</i>
        </b-button>
    </template>
</b-table>

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' }
]

fields: [
    { key: 'date', label: 'Date', sortable: true },
    { key: 'from', label: 'From', sortable: true },
    { key: 'to', label: 'To', sortable: true },
    { key: 'city', label: 'City', sortable: true },
}

dataBackend = [
    0 = { code: 1, description: 'Joel' },
    1 = { code: 2, description: 'Maria' },
    2 = { code: 3, description: 'Lucas' }
]

当前：

预期结果：

Answer 1

您可以在两个字段上使用formatter功能来实现此目的。

格式化程序将在每一行上运行，并接收单元格的值，在这种情况下为代码，您可以使用该值在所需的后端数据中查找对象，并返回说明。

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' }
      ],
      fields: [
        { key: 'date', label: 'Date', sortable: true },
        { key: 'from', label: 'From', sortable: true, formatter: this.getDescription},
        { key: 'to', label: 'To', sortable: true, formatter: this.getDescription},
        { key: 'city', label: 'City', sortable: true }
      ],
      dataBackend: [
        { code: 1, description: 'Joel' },
        { code: 2, description: 'Maria' },
        { code: 3, description: 'Lucas' }
      ]
    }
  },
  methods: {
    getDescription(code) {
      return this.dataBackend.find(data => data.code == code).description;
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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/[email protected]/dist/bootstrap-vue.js"></script>


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