需要实现的效果：双击文本  -  修改文本  -  保存修改。

 原码：仅文本显示文字内容

 实现双击文本、修改文本：

在上面源码基础上进行编辑，新增如下

修改后代码：

​​​​​​​

行内文本框的双击事件、失去焦点/回车事件：

    startEditing(index, row) {       // 启用编辑模式：设置当前行的isEditing属性值为true，使用 this.$set 同步更新视图为文本框       this.$set(row, 'isEditing', true);     },     stopEditing(index, row) {       // 禁用编辑模式：设置当前行的isEditing属性值为false，使用 this.$set 同步更新视图为文本       this.$set(row, 'isEditing', false);       console.info(row);       console.info(row.id);       console.info(row.goodsId);       console.info(row.goodsName);       // 这里可以添加保存或其他逻辑       // 调用接口，更新数据      }

后端数据集合对象中，新增属性 isEditing

总体参考代码：

其他 

1. 想要一体版的，看这里 https://blog.csdn.net/torpidcat/article/details/101369733

2. vue-ele-editable   适用原生vue

https://github.com/dream2023/vue-ele-editable