el-table内容可编辑

要在 Element UI 的表格（el-table）中使内容可编辑，可以按照以下步骤进行操作：

1. 在 `el-table` 中设置 `:show-summary="false"`，以确保表格不使用汇总行。

2. 在表格的列定义中，使用 `:editable="true"` 属性来标记可编辑的列。例如：

<el-table :data="tableData" :show-summary="false">
  <el-table-column prop="name" label="Name" :editable="true">
    <!-- 列的其他配置 -->
  </el-table-column>
  <el-table-column prop="age" label="Age" :editable="true">
    <!-- 列的其他配置 -->
  </el-table-column>
  <!-- 其他列定义 -->
</el-table>

3. 定义一个编辑状态的标志位（例如 `editingRow`），用于标记正在编辑的行。

data() {
  return {
    tableData: [
      { name: 'John', age: 25 },
      { name: 'Jane', age: 30 },
      // 其他行数据
    ],
    editingRow: null // 正在编辑的行，默认为null
  };
}

4. 创建一个方法来处理编辑行的操作。例如，你可以使用 `handleEdit(row)` 方法来设置 `editingRow` 标志位为当前编辑的行。

methods: {
  handleEdit(row) {
    this.editingRow = row;
  }
}

5. 在表格列的模板中，根据 `editingRow` 的值来决定是否显示输入框或文本。

<el-table-column prop="name" label="Name" :editable="true">
  <template slot-scope="scope">
    <span v-if="scope.row !== editingRow">{{ scope.row.name }}</span>
    <el-input v-else v-model="scope.row.name"></el-input>
  </template>
</el-table-column>

在这个示例中，如果当前行不是正在编辑的行，则显示文本。如果当前行是正在编辑的行，则显示输入框，并使用 `v-model` 指令绑定输入框的值到数据中。

6. 可以根据需要添加其他编辑操作，例如保存编辑、取消编辑等。

这样，你就可以在 Element UI 的表格中实现内容可编辑的功能。根据你的实际需求，可以进一步自定义编辑行为和样式。