Bootstrap

Vuetify Data tables(数据表格)自定义某一列数据

官网写法使用插槽 item.key 来修改某一列的数据

<template>
  <v-data-table
    :headers="headers"
    :items="vegetables"
  >
    <template v-slot:item.calories="{ value }">
      <v-chip :color="getColor(value)">
        {{ value }}
      </v-chip>
    </template>
  </v-data-table>
</template>

但是有可能出现因为eslint版本的问题而报错,如图所示:

此时我们可以将item.age修改为字符串就可以解决了。

<template v-slot:[`item.age`]="{ item }">
  {{ item.age }}
</template>

;