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

Question

所以，我需要格式化一个从后端到前端的日期。 我有一张桌子：

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

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

点击"搜索"按钮后，数据来自后端并在表中可视化。但是，现在的日期格式是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 的表行槽