Vuetify 表格添加操作按钮

自定义表头

服务端返回数据中没有包含actions一项，是前端自己添加的表头。

const headers = [
  {title: 'ID', align: 'center', key: 'id', sortable: false, minWidth: 200},
  {title: '姓名', align: 'center', key: 'name', sortable: false, minWidth: 200},
  {title: '状态', align: 'center', key: 'status', sortable: false, minWidth: 200},
  {title: '创建时间', align: 'center', key: 'createTs', sortable: false, minWidth: 200},
  {title: '操作', align: 'center', key: 'actions', sortable: false, minWidth: 200},
]

模板

在模板中对应插槽item.actions。

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :loading="loading"
    loading-text="加载中"
    no-data-text="无数据"
    density="compact"
  >
    <template v-slot:item.actions="{ item }">
      <v-btn color="primary">操作1</v-btn>
      <v-btn color="primary">操作2</v-btn>
    </template>
  </v-data-table>
</template>