如何实现Vuetify v-data-table仅Result列单元格可编辑

下面提供两种简单直接的实现方案，按需选择即可：

方法一：针对Result列单独绑定点击事件（推荐） #

通过给Result列单独定义插槽，仅在该列的单元格上绑定编辑弹窗触发逻辑，其他列保持默认无交互状态：

1. 定义表格基础配置

data() {
  return {
    columns: [
      { title: 'No', key: 'no' },
      { title: 'Name', key: 'name' },
      { title: 'Result', key: 'result' }
    ],
    items: [/* 你的业务数据 */],
    editDialog: false,
    currentEditItem: null
  }
}

2. 模板中配置表格与弹窗

<v-data-table :headers="columns" :items="items">
  <!-- 仅给Result列的单元格添加点击事件 -->
  <template v-slot:item.result="{ item }">
    <td @click="openEditModal(item)">{{ item.result }}</td>
  </template>
  
  <!-- No、Name列使用默认渲染，无需额外配置 -->
</v-data-table>

<!-- 编辑弹窗 -->
<v-dialog v-model="editDialog">
  <v-card>
    <v-card-text>
      <v-text-field v-model="currentEditItem.result" label="修改Result"></v-text-field>
    </v-card-text>
    <v-card-actions>
      <v-btn @click="editDialog = false">取消</v-btn>
      <v-btn @click="saveEdit">保存</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

3. 实现弹窗控制方法

methods: {
  openEditModal(item) {
    // 深拷贝原数据，避免弹窗中直接修改列表数据
    this.currentEditItem = JSON.parse(JSON.stringify(item));
    this.editDialog = true;
  },
  saveEdit() {
    // 找到原数据并更新
    const targetIndex = this.items.findIndex(i => i.no === this.currentEditItem.no);
    if (targetIndex !== -1) {
      this.items.splice(targetIndex, 1, this.currentEditItem);
    }
    this.editDialog = false;
  }
}

方法二：通过表格cell-clicked事件过滤列 #

如果你的代码已经在使用表格的cell-clicked全局事件，可在回调中判断当前点击的列是否为Result列，再决定是否触发弹窗：

1. 模板绑定事件

<v-data-table 
  :headers="columns" 
  :items="items"
  @cell-clicked="handleCellClick"
></v-data-table>

2. 实现事件处理逻辑

methods: {
  handleCellClick(item, column) {
    // 仅当点击Result列时打开弹窗
    if (column.key === 'result') {
      this.currentEditItem = JSON.parse(JSON.stringify(item));
      this.editDialog = true;
    }
  },
  // saveEdit方法同方法一
}

内容的提问来源于stack exchange，提问作者Keyboard Corporation