vue 实现el-table行内编辑

要实现el-table行内编辑，可以使用el-editable-cell组件。具体步骤如下：

1. 在el-table-column中设置prop属性，指定该列对应的数据字段。
2. 在el-table-column中设置editable属性为true，表示该列可编辑。
3. 在el-table-column中设置scoped-slot属性，指定该列的渲染方式。在scoped-slot中使用el-editable-cell组件包裹需要渲染的内容。
4. 在el-editable-cell组件中设置v-model属性，绑定该单元格的值。
5. 在el-editable-cell组件中设置@change事件，监听单元格值的变化，并将变化后的值通过emit方法传递给父组件。

示例代码如下：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" editable>
      <template slot-scope="{ row }">
        <el-editable-cell v-model="row.name" @change="handleChange"></el-editable-cell>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄" editable>
      <template slot-scope="{ row }">
        <el-editable-cell v-model="row.age" @change="handleChange"></el-editable-cell>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ]
    }
  },
  methods: {
    handleChange(value, row) {
      console.log(value, row)
      // 处理单元格值的变化
    }
  }
}
</script>