我有一个使用Vuetify数据表的简单数据表。其中一列是createdOn（日期时间），我想对其进行格式化。我该怎么做 ？
这就是我现在得到的：
<template>
<v-layout>
<v-data-table :headers="headers" :items="logs">
</v-data-table>
<v-layout>
</template>
<script>
headers: [
{ text: "Time", value: "createdOn", dataType: "Date" },
{ text: "Event Source", value: "eventSourceName" },
{ text: "Event Details", value: "eventDetails" },
{ text: "User", value: "user" }
],
items: [],
</script>
你应该使用一个custom row cell：
<v-data-table :headers="headers" :items="logs">
<template v-slot:item.createdOn="{ item }">
<span>{{ new Date(item.createdOn).toLocaleString() }}</span>
</template>
</v-data-table>
我找到了一种使用动态插槽名称和标头对象中的函数来格式化单元格值的方法：
在<v-data-table>我做的：
<template v-for="header in headers.filter((header) => header.hasOwnProperty('formatter'))" v-slot:[`item.${header.value}`]="{ header, value }">
{{ header.formatter(value) }}
</template>
在 vuedata属性中我做了：
headers: [
...
{ text: 'Value for example', value: '10000', formatter: formatCurrency },
...
]
最后在methodsprops中我做了：
formatCurrency (value) {
return '$' + value / 100
},
这是一个沙箱，可以查看它的运行情况：https : //codesandbox.io/s/vuetify-datatable-value-formatter-jdtxj
编辑：在这种特定情况下，您可以使用momentjs或 javascript 的Date()
我还使用了带有 v-slot 的全局过滤器：
<v-data-table :headers="headers" :items="logs">
<template v-slot:item.createdOn="{ item }">
<span>{{ item.createdOn | myGlobalDateFilter }}</span>
</template>
</v-data-table>
在数据表组件 Datatable.vue 中
<template v-for="slot in slots" v-slot:[`item.${slot.slotName}`]="{ item }">
<slot :name="slot.slotName" :variable="item"></slot>
</template>
export default {
props:
slots:{
type:Array,
default:null
},
和父组件
<Datatable
:headers="headers"
:items="stokhareketleri"
:title="title"
:slots="slots">
<template v-slot:column_name="{ variable }">
<v-chip
color="green"
dark
>
{{variable.column_name}}
</v-chip>
</template>
</Datatable>
data () {
return {
slots:[{
Id: 1, slotName: 'column_name'
}],
如果你想要一个更简单的解决方案，或者至少一个你可以格式化其他列的解决方案：
<v-data-table :headers="headers" :items="logs">
<template v-slot:body="{ items }">
<tbody>
<tr v-for="item in items" :key="logs.id">
<td> {{ new Date(item.createdOn).toLocaleString() }} </td>
...
</tr>
</tbody>
</template>
</v-data-table>
诀窍是使用body的时隙v-data-table。更多信息在这里。