v-data-table item.actions插槽不可用，如何实现CRUD操作功能？

要实现表格行的编辑、删除操作按钮，在Vuetify 3里需要调整插槽用法，步骤如下：

1. 先在表头配置中添加操作列 #

确保你的scopeHeaders数组里包含一个value为actions的列定义，示例：

const scopeHeaders = [
  // 其他业务列示例
  { text: '权限名称', value: 'name' },
  { text: '描述', value: 'description' },
  // 添加操作列
  { text: '操作', value: 'actions', sortable: false, align: 'end' }
];

2. 使用对应字段的item插槽渲染操作按钮 #

修改表格代码，保持插槽写法但确保表头已配置对应列，完整示例：

<div class="text-overline mb-1">Scopes</div>
<v-data-table 
  items-per-page="5" 
  density="compact" 
  :items="state.clientScopes"
  :headers="scopeHeaders"
>
  <!-- 操作列插槽，对应表头里的value: 'actions' -->
  <template v-slot:item.actions="{ item }">
    <v-icon size="small" class="me-2 cursor-pointer" @click="handleEdit(item)">mdi-pencil</v-icon>
    <v-icon size="small" class="cursor-pointer text-red" @click="handleDelete(item)">mdi-delete</v-icon>
  </template>
</v-data-table>

关键说明 #

Vuetify 3取消了v-data-table默认的item.actions插槽，改为必须先在表头定义对应列，再通过item.{列的value}插槽自定义内容。这种方式能更灵活地控制操作列的显示位置、对齐方式等。

需要添加点击逻辑的话，直接给图标绑定@click事件，调用你自己定义的编辑、删除方法即可。

内容的提问来源于stack exchange，提问作者eszik.k