vue 使用 elementui 双击单元格修改数据

在Vue中使用Element UI时，可以通过双击表格的某个单元格来修改数据。以下是一个简单的示例，展示了如何实现这一功能：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <span @dblclick="handleDoubleClick(scope.$index, scope.column)">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', ... }, ...]
    }
  },
  methods: {
    handleDoubleClick(rowIndex, column) {
      const row = this.tableData[rowIndex];
      if (column.property === 'name') {
        this.$prompt('请输入姓名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: row.name,
          inputErrorMessage: '姓名不能为空'
        }).then(({ value }) => {
          if (value) {
            this.$set(this.tableData[rowIndex], 'name', value);
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });          
        });
      }
    }
  }
}
</script>

在这个示例中，我们定义了一个带有双击事件的姓名列。当在这个单元格中双击时，会弹出一个prompt对话框让用户输入新的姓名。如果用户确认，则更新表格中对应行的姓名数据。

注意：handleDoubleClick 方法中的 this.$set 是Vue的一个方法，它用于响应式地设置对象的属性。这是确保Vue的响应式系统能够检测到数据变化并更新视图的关键。