elementui可编辑单元格_ElementUI 表格可编辑单元格

ElementUI的表格组件中，可以通过设置 `:editable="true"` 来开启单元格的可编辑模式。当单元格进入编辑模式时，会显示一个输入框，用户可以在输入框中修改单元格内容。用户完成编辑后，可以通过点击外部区域或按下回车键来结束编辑模式。

以下是一个使用 ElementUI 表格的可编辑单元格示例代码：

<template>
  <div>
    <el-table :data="tableData" :editable="true">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 22, gender: '女' },
        { name: '王五', age: 25, gender: '男' }
      ]
    }
  }
}
</script>

在上面的示例中，我们设置了 `:editable="true"`，开启了表格的可编辑模式。同时，每个表格列设置了 `prop` 属性，表示该列对应数据的属性名。这样，当单元格进入编辑模式时，会自动将该单元格对应的数据项的属性值更新为用户输入的内容。

另外，如果需要在用户完成编辑后触发回调函数进行处理，可以使用 `@cell-edit-done` 事件来监听单元格编辑完成事件，例如：

<el-table @cell-edit-done="handleCellEditDone">
  <!-- 表格列定义 -->
</el-table>

methods: {
  handleCellEditDone(row, column, cell, event) {
    console.log('编辑完成，新值为：', row[column.property])
  }
}