Vue JS中实现表格单元格点击可编辑的方法

以下是给你的data-table添加单元格点击编辑功能的具体方案：

1. 更新数据结构，添加编辑状态标识 #

在获取学生数据后，给每条数据添加isEditing字段，用于控制当前行的编辑状态：

<script>
export default {
  name: "Test",
  data: () => ({
    students: [],
  }),
  methods: {
    getStudents(loading, page = 1, filter = '', sort = '', perPage = '') {
      axios.get('/api/students')
        .then((response) => {
          // 给每条学生数据追加编辑状态字段
          this.students = response.data.data.map(item => ({
            ...item,
            isEditing: false // 默认处于非编辑状态
          }));
        })
        .catch(err => {
          console.error('获取学生数据失败:', err);
        });
    }
  }
}
</script>

2. 自定义表格列，实现点击切换编辑状态 #

假设你的data-table支持自定义列插槽（类似常见UI框架的表格插槽语法），修改模板代码，为每个可编辑列添加点击事件和状态切换逻辑：

<data-table :data="students">
  <!-- 示例：姓名列 -->
  <template #column-name="scope">
    <div @click="toggleEdit(scope.row)">
      <!-- 根据编辑状态切换显示文本或输入框 -->
      <span v-if="!scope.row.isEditing">{{ scope.row.name }}</span>
      <input 
        v-else 
        type="text" 
        v-model="scope.row.name"
        @blur="saveEdit(scope.row)"
        @keyup.enter="saveEdit(scope.row)"
        @mounted="$nextTick(() => $event.target.focus())"
      >
    </div>
  </template>

  <!-- 年龄列（其他列可参考此结构修改） -->
  <template #column-age="scope">
    <div @click="toggleEdit(scope.row)">
      <span v-if="!scope.row.isEditing">{{ scope.row.age }}</span>
      <input 
        v-else 
        type="number" 
        v-model="scope.row.age"
        @blur="saveEdit(scope.row)"
        @keyup.enter="saveEdit(scope.row)"
        @mounted="$nextTick(() => $event.target.focus())"
      >
    </div>
  </template>
</data-table>

3. 添加编辑状态切换和保存方法 #

在methods中新增两个方法，分别处理编辑状态切换和数据保存：

<script>
export default {
  // ... 原有代码
  methods: {
    // ... 原有getStudents方法
    toggleEdit(row) {
      // 可选：关闭其他行的编辑状态，确保同一时间只有一行可编辑
      this.students.forEach(item => {
        if (item.id !== row.id) item.isEditing = false;
      });
      row.isEditing = !row.isEditing;
    },
    saveEdit(row) {
      row.isEditing = false;
      // 调用后端接口更新数据
      axios.put(`/api/students/${row.id}`, row)
        .then(() => {
          console.log('数据更新成功');
        })
        .catch(err => {
          console.error('数据更新失败:', err);
          // 更新失败时可重新拉取数据还原
          this.getStudents();
        });
    }
  }
}
</script>

注意事项 #

• 如果你的data-table组件不支持插槽，需先查看组件文档确认自定义列的方式，或替换为支持自定义列的表格组件。
• 若需要单个单元格独立编辑（而非整行），可给每个字段单独设置编辑状态（如editName、editAge），而非整行的isEditing。

内容的提问来源于stack exchange，提问作者360 Degree Tutorials