Javascript 如何在数据表vue中使用切片方法

我有一个vue应用程序，其中Im使用v-data表。我正在表中显示一些数据，但我想使用slice方法来更改显示它的方式

以下是我在表格中显示的内容：

以下是我想要的：

我知道我应该使用slice方法来实现这个结果，但我不知道如何将slice方法用于v-data-table。我需要帮助来应用这个方法

table.js

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

脚本-方法

 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',
  
    }

---

您可以创建一个函数，根据需要设置日期格式：

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

在你得到工作时间后，你可以像这样改变它：

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' },
]

---

有一件事，我应该在formatHoursMinuted之前添加它：）this.technicianWorkhours.forEach（item=>{item.startDate=this.formatHoursMinutes（item.startDate）；item.endDate=this.formatHoursMinutes（item.endDate）；}）；

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