table表格行内编辑

element-admin模板有英文demo
中文demo如下：
table表格代码：

<el-table-column min-width="100px"  label="作者" align="center">
 <template slot-scope="{row}">
   <template v-if="row.edit">
     <el-input v-model="row.author" class="edit-input" size="small" />
     <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">
       取消
     </el-button>
   </template>
   <span v-else>{{ row.author }}</span>
 </template>
</el-table-column>
<!-- 操作 -->
<el-table-column align="center" label="操作" width="250">
  <template slot-scope="{row}">
    <el-button v-if="row.edit" type="success" size="small" icon="el-icon-success"  @click="confirmEdit(row)" >
       确定
    </el-button>
    <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit" >
       编辑
    </el-button>
  </template>
</el-table-column>

列表接口中没有edit，用set给列表填上

async getList() {
    this.listLoading = false
    const { data } = await fetchList(this.listQuery)
    const items = data.items
    this.list = items.map(v => {
    this.$set(v, 'edit', false) //给列表数据set进edit字段
    //v.originalTitle = v.title//自定义title
    v.originalAuthor = v.author
    return v
  })
    this.listLoading = false
},

确定、取消按钮代码：

// 取消编辑
 cancelEdit(row) {
   //row.title = row.originalTitle//originalTitle是接口返回的字段，取消时，重新拿接口字段，赋值给自己定义的title
   row.author = row.originalAuthor
   row.edit = false
   this.$message({
     message: '已取消',
     type: 'warning'
   })
 },
 // 确定编辑
 confirmEdit(row) {
   row.edit = false
   //row.originalTitle = row.title//确定时，自定义title赋值给接口字段originalTitle，这里做静态demo，走实际接口赋值给提交的表单/表格就行
   row.originalAuthor = row.author 
   this.$message({
     message: '编辑成功',
     type: 'success'
   })
 },
    ```