Question

我正在使用 BootstrapVue的表组件和 Luxon ，并尝试使用“格式回调”格式化ISO日期，以将日期输出自定义为更易于理解的格式。

不幸的是，我收到一个错误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

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

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

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

1 个答案: