在 VueJS 中格式化日期。后端到前端

Question

所以，我需要格式化从后端传到前端的日期。我有一个 table:

    <vue-good-table
    :columns="columns"
    :rows="formatedItems"
    :paginate="true"
    :lineNumbers="true">

<script>
    export default {
        components: {
          Datepicker
        },
            data(){
                return {
            DatePickerFormat: 'dd/MM/yyyy',
                    items: [],
            columns: [
                        {
                            label: 'Number',
                            field: 'number',
                            type: 'String',
                            filterable: true,
                            placeholder: 'Number'
                        },
                        {
                            label: 'Identification number',
                            field: 'identNumber',
                            type: 'String',
                            filterable: true,
                            placeholder: 'Identification number'
                        },
                        {
                            label: 'Name',
                            field: 'name',
                            type: 'String',
                            filterable: true,
                            placeholder: 'Name'
                        },
                        {
                            label: 'Code',
                            field: 'code',
                            type: 'String',
                            filterable: true,
                            placeholder: 'Code'
                        },
                        {
                            label: 'From',
                            field: 'dateFrom',
                            type: 'String',
                            filterable: true,
                            placeholder: 'dd/mm/yyyy'
                        },
                        {
                            label: 'To',
                            field: 'dateTo',
                            type: 'String',
                            filterable: true,
                            placeholder: 'dd/mm/yyyy'
                        },
                        {
                            label: 'Last change',
                            field: 'dateChanged',
                            type: 'String',
                            filterable: true,
                            placeholder: 'dd/mm/yyyy'
                        },
                        {},
                        {}
                    ],
                    fields : {
                        "Number": "number",
                        "Identification numer": "identNumber",
                        "Name": "name",
                        "Code": "code",
                        "From": "dateFrom",
                        "To": "dateTo",
                        "Last Change": "dateChanged"
                    },
                    json_meta: [
                        [{
                        "key": "charset",
                        "value": "utf-8"
                        }]
                    ]
                }
            },
    computed: {
      formatedItems () {
        if (!this.items || this.items.length === 0) return []
        return this.rows.map(item => {
          return {
            ...items,
            dateFrom: moment(item.dateFrom).format('DD/MM/YYYY'),
            dateTo: moment(item.dateTo).format('DD/MM/YYYY'),
            dateChanged: moment(item.dateChanged).format('DD/MM/YYYY')
          }
        })
      }
    }
</script>

这是正确的代码段吗？因为出于某种原因我无法让它工作？

点击 "search" 按钮后，数据来自后端并在 table 中可视化。但是，现在的日期格式是 1554163200000。我如何制作它并将其格式化为 dd/mm/yyyy?

错误：

TypeError: Cannot read property 'map' of undefined
    at s.formattedItems (eoriTable.vue:231)
    at xt.get (vue.esm.js:3142)
    at xt.evaluate (vue.esm.js:3249)
    at s.formattedItems (vue.esm.js:3507)
    at s.render (eoriTable.vue?d724:1)
    at s.A._render (vue.esm.js:4544)
    at s.<anonymous> (vue.esm.js:2788)
    at xt.get (vue.esm.js:3142)
    at xt.run (vue.esm.js:3219)
    at Lt (vue.esm.js:2981)
JA @ vue.esm.js:1741

这是我构建时的错误。当我将 :rows: formattedItems 更改为项目（这是默认值）时，它呈现的一切都很好，但日期未格式化。

Answer 1

您可以使用 moment.js 和计算属性

import moment from 'moment'

....
computed: {
  formatedItems () {
    if (!this.items || this.items.length === 0) return []
    return this.items.map(item => {
      return {
        ...item,
        dateFrom: moment(item.dateFrom).format('DD/MM/YYYY'),
        dateTo: moment(item.dateTo).format('DD/MM/YYYY'),
        dateChanged: moment(item.dateChanged).format('DD/MM/YYYY')
      }
    })
  }
}

并在您的组件中

<vue-good-table
:columns="columns"
:rows="formatedItems"
:paginate="true"
:lineNumbers="true">

另一种选择是使用 vue-good-table-row slottable

在 VueJS 中格式化日期。后端到前端

Format Date in VueJS. Back-end to front-end

format

date

vue.js