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

我正在使用BootstrapVue的Table组件和Luxon，并尝试使用“格式化程序回调”来格式化ISO日期，以将日期输出定制为更易于人类阅读的内容

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

无效的日期时间

示例数据

。/assets/users.json“

：

以下是我的尝试：

{{data.value.userId}
从“./assets/users.json”导入用户；
从“luxon”导入{DateTime}；
导出默认值{
数据（）{
返回{
用户：[]，
字段：[
{key:“id”}，
{key:“first_name”}，
{键：“分配的日期”，格式化程序：“分配的格式化日期”}
]
};
},
方法：{
formatDateAssigned（值）{
const formattedDate=DateTime.fromISO(
赋值日期
).toLocaleString（DateTime.DateTime_SHORT）；
返回格式化日期；
}
}
};

---

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

问题来自格式化程序内部使用的值，传递给格式化程序函数的值已经是您想要的值，您不需要使用内部的字段键

只需在

formatDateAssigned

函数中将

value.date\u分配给
value

{
  "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"
    }
  ]
}

<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>