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

您可以在两个字段上使用pd.NA函数来实现此目的。

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

有关格式化程序的更多信息，可以在Bootstrap-Vue文档的formatter下找到。

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

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;
    }
  }
})

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

1 个答案: