前端行内编辑功能呢实现

1.先为每一行的数据内容添加一个编辑
this.list.forEach(item => { this.$set(item, ‘isEdit’, false) })

2.绑定点击事件：

@click="btnEditRow(row)"
row.isEdit = true//点击之后将标记改为true
//条件判断
<el-input v-if="row.isEdit" size="mini" />
<span v-else>{{ row.name }}</span>

3.缓存数据：

//添加一个标记并存储当前的数据
this.$set(item, 'editRow', {
          name: item.name,
          state: item.state,
          description: item.description
        })
        
 btnEditRow(row) {
      row.isEdit = true // 改变行的编辑状态
      // 更新缓存数据
      row.editRow.name = row.name
      row.editRow.state = row.state
      row.editRow.description = row.description
}       

4.双向绑定表单数据

v-model="row.editRow.name"
.........