javascript - How to use slice method in data-table, vue

Question

I have a vue app where Im using v-data table. I'm displaying some data in the table but I want to use slice method to change the way to display it.

Here is what I display in my table:

Here is what I want to have:

I know that I should use the slice method to achieve this result but I dont know how to use slice method with v-data-table. I need help with applying this method.

table.js

     <v-data-table
                v-model="selected"
                dense
                :headers="headers"
                :items="workHours"
                show-select
              > </v-data-table>

script - headers

 headers: [
      { text: 'Start date', value: 'startDate' },
      { text: 'End date', value: 'endDate' },

    ]
  }),

script - methods

 methods: {
   
    async getworkHours() {
      let result = await this.sendAjaxWithParams(this.ajaxURLs.getworkHours);
      this.workHours= result.result.items;
    },

api.js

router.post('/getworkHours', (req, res) => {
  var items = [
    {
      startDate: '2018-01-05T09:00:00Z',
      endDate: '2018-01-05T16:45:00Z',
    },
    {
      startDate: '2018-01-03T07:00:00Z',
      endDate: '2018-01-03T19:00:00Z',
  
    }

Answer 1

您可以创建一个函数来根据需要格式化您的日期：

function formatHoursMinutes(str) {
    const date = new Date(str)
    const hours = ('0' + date.getHours()).slice(-2)
    const minutes = ('0' + date.getMinutes()).slice(-2)
    return `${hours}:${minutes}`
}

然后在你得到 workHours 之后，你可以像这样改变它：

this.workHours.forEach(item => {
    item.startDate = formatHoursMinutes(item.startDate)
    item.endDate = formatHoursMinutes(item.endDate)
})

---

您还可以创建新属性而不是改变原始属性：

this.workHours.forEach(item => {
    item.startDateHoursMinutes = formatHoursMinutes(item.startDate)
    item.endDateHoursMinutes = formatHoursMinutes(item.endDate)
})

然后在你的标题中：

headers: [
    { text: 'Start date', value: 'startDateHoursMinutes' },
    { text: 'End date', value: 'endDateHoursMinutes' },
]