双击编辑el-table的单元格数据

在Vue.js中使用Element UI库时，可以通过结合@cell-dblclick事件来实现双击编辑表格的功能。以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @cell-dbl-click="handleCellDoubleClick"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    }
  },
  methods: {
    handleCellDoubleClick(row, column, cell, event) {
      // 判断点击的列是否为编辑列
      if (column.property === 'name' || column.property === 'address') {
        // 创建输入框
        const input = document.createElement('input');
        input.type = 'text';
        input.value = row[column.property];
        input.onblur = () => {
          // 输入框失去焦点时，更新数据
          row[column.property] = input.value;
          // 移除输入框
          cell.innerHTML = '';
        };
        // 将单元格内容替换为输入框
        cell.innerHTML = '';
        cell.appendChild(input);
        input.focus(); // 输入框获取焦点
      }
    }
  }
}
</script>

在这个例子中，我们定义了一个handleCellDoubleClick方法来处理单元格双击事件。当用户双击特定列（在这个例子中为name和address列）时，我们会创建一个文本输入框，并在单元格中显示。当输入框失去焦点时，我们会更新数据并移除输入框。这样就实现了在Vue.js中使用Element UI的el-table组件实现双击编辑功能的需求。