Vue表格字段格式化

Question

我正在尝试将日期从 unix 时间戳格式化为人类友好的日期，但我陷入困境。我希望它以这种方式工作：

<Column field="createdAt" header="Created at">{{ new Date(this).toLocaleString() }}</Column>

但我不知道如何引用该字段的特定单元格。有人可以帮忙吗？这是我的其余代码：

<template>
  <div>
    <DataTable :value="filters">
      <Column field="id" header="Id"></Column>
      <Column field="highlight" header="Highlight"></Column>
      <Column field="usage" header="Usage"></Column>
      <Column field="createdAt" header="Created at">{{ new Date(this.$data.createdAt).toLocaleString() }}</Column>
    </DataTable>
  </div>
</template>

<script lang="ts">
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import { ref, defineComponent } from 'vue'
import { DynamicFilterRowDto } from "@/api/api";
import { getDynamicFilters } from "@/service/data";

export default defineComponent({
  name: 'DynamicFilters',
  components: {
    DataTable,
    Column,
  },
  setup: () => {
    const filters = ref<DynamicFilterRowDto[] | undefined>()

    const fetch = async () => {
      filters.value = await getDynamicFilters()
    }
    fetch()
    return { filters, formatOptions: { format: "MM-dd-yyyy", type: "date" }  }
  },

})
</script>

Answer 1

<Column>

组件有一个

body

槽，其

data

slot prop提供

filters[]

中数组元素对应的行数据。因此，您可以使用

data

来访问

createdAt

:

<Column field="createdAt" header="Created at">
  <template #body="{ data }">{{ new Date(data.createdAt).toLocaleString() }}</template>
</Column>

演示

Answer 2

在 Vue 3+ 中你仍然可以像 tony19 那样做：

<Column field="createdAt" header="Created at">
  <template #body="slotProps">{{ new Date(slotProps.data.createdAt).toLocaleString() }}</template>
</Column>