当点击table数据时能进行修改

在当前的代码中，表格（`<el-table>`）中的每一行都有一个“编辑”按钮，点击该按钮会触发 `handleEdit` 方法，并传入当前行的索引和数据。以下是相关代码段：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  </template>
</el-table-column>

### `handleEdit` 方法

methods: {
  handleEdit(index, row) {
    console.log(index, row);
    this.$message.success('编辑成功');
  },
  // 其他方法...
}

### 实现点击表格数据直接编辑

如果你希望点击表格数据本身就能进行编辑，可以使用以下步骤：

1. **添加点击事件**：为表格单元格添加点击事件，以便捕获用户的点击动作。
2. **显示编辑输入框**：在点击单元格时，将静态文本替换为可编辑的输入框。
3. **保存编辑结果**：在输入框失去焦点或按下回车键时，保存编辑结果并更新数据。

#### 示例代码

1. **HTML 部分**

<el-table-column label="日期" width="180">
  <template slot-scope="scope">
    <i class="el-icon-time"></i>
    <span v-if="!scope.row.isEditing" style="margin-left: 10px" @click="startEdit(scope.$index, 'date')">{{ scope.row.date }}</span>
    <el-input v-else v-model="scope.row.date" @blur="saveEdit(scope.$index, 'date')" @keyup.enter.native="saveEdit(scope.$index, 'date')"></el-input>
  </template>
</el-table-column>

<el-table-column label="姓名" width="180">
  <template slot-scope="scope">
    <el-popover trigger="hover" placement="top">
      <p>姓名: {{ scope.row.name }}</p>
      <p>地址: {{ scope.row.address }}</p>
      <div slot="reference" class="name-wrapper">
        <el-tag size="medium" @click="startEdit(scope.$index, 'name')">{{ scope.row.name }}</el-tag>
      </div>
    </el-popover>
  </template>
</el-table-column>

2. **JavaScript 部分**

var app = new Vue({
  el: '#app',
  data: {
    tableData: [
      { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', isEditing: false },
      { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', isEditing: false },
      { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', isEditing: false },
      { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', isEditing: false }
    ]
  },
  methods: {
    startEdit(index, field) {
      this.tableData[index].isEditing = true;
      this.currentEditField = field;
    },
    saveEdit(index, field) {
      this.tableData[index].isEditing = false;
      this.$message.success('编辑成功');
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.$message.success('编辑成功');
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.tableData.splice(index, 1);
    }
  }
});

通过上述修改，你可以实现点击表格数据直接进入编辑模式，并在编辑完成后保存更改。