如何使用 BootstrapVue 自定义格式 table 数据？

Question

我正在使用 BootstrapVue 的 Table 组件 和 Luxon 并尝试使用 'formatter callback' 将日期输出自定义为更易于阅读的内容。

不幸的是，我得到一个错误Invalid DateTime

样本数据../assets/users.json":

{
  "data": [
    {
      "id": 1,
      "first_name": "Salmon",
      "last_name": "Searight",
      "email": "ssearight0@usda.gov",
      "gender": "Male",
      "ip_address": "186.63.72.254",
      "date_assigned": "2019-07-15T12:58:06.382Z"
    },
    {
      "id": 2,
      "first_name": "Marika",
      "last_name": "Cloonan",
      "email": "mcloonan1@phpbb.com",
      "gender": "Female",
      "ip_address": "247.143.78.216",
      "date_assigned": "2019-07-15T12:58:06.382Z"
    },
    {
      "id": 3,
      "first_name": "Dyan",
      "last_name": "Dainter",
      "email": "ddainter2@yolasite.com",
      "gender": "Female",
      "ip_address": "234.16.229.89",
      "date_assigned": "2019-07-15T12:58:06.382Z"
    }
  ]
}

这是我的尝试（sample sandbox）：

<template>
  <div>
    <b-table :items="users" :fields="fields">
      <!-- A custom formatted column -->
      <template slot="name" slot-scope="data">{{ data.value.userId }}</template>
    </b-table>
  </div>
</template>

<script>
import users from "../assets/users.json";
import { DateTime } from "luxon";

export default {
  data() {
    return {
      users: [],
      fields: [
        { key: "id" },
        { key: "first_name" },
        { key: "date_assigned", formatter: "formatDateAssigned" }
      ]
    };
  },
  methods: {
    formatDateAssigned(value) {
      const formattedDate = DateTime.fromISO(
        value.date_assigned
      ).toLocaleString(DateTime.DATETIME_SHORT);
      return formattedDate;
    }
  }
};
</script>

有人发现导致错误的原因吗？谢谢！

Answer 1

问题出在格式化程序内部使用的值，传递给格式化程序函数的值已经是你想要的，你不需要使用里面的字段键。

只需在 formatDateAssigned 函数中将 value.date_assigned 替换为 value。

如何使用 BootstrapVue 自定义格式 table 数据？

How to custom format table data with BootstrapVue?

vuejs2

bootstrap-vue