Vuetify 데이터 테이블 날짜 열을 포맷하는 방법?

Vuetify 데이터 테이블 날짜 열을 포맷하는 방법?

나는 Vuetify 데이터 테이블을 사용하는 간단한 데이터 테이블을 가지고 있다.칼럼 중 하나는 a이다.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>

a를 사용해야 함:

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

그리고 나중에.data내가 한 속성:

headers: [
    ...
    { text: 'Value for example', value: '10000', formatter: formatCurrency },
    ...
]

그리고 마침내methods내가 한 소품:

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>

데이터 가능 구성 요소 데이터 가능.부에를 하다

<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. 여기에 더 많은 정보가 있다.

참조URL: https://stackoverflow.com/questions/57944894/how-to-format-vuetify-data-table-date-column