vue + elementUi实现可编辑表格数据

由于项目需求  需要表格的内容可以进行修改

思路：当点击修改的时候切换到input输入框，否则就是文本

如图:

先定义一个变量用来控制span和input的显示隐藏，由于点击编辑只修改当行数据，所以用index索引来控制

代码如下：

还有一种情况就是你点击编辑的时候 ，并不是空的输入框，是需要带回显数据的，这种操作相对简单一些，直接修改对应的tableData数据即可如图：

只需要改input里的model就这块可以了

提交数据这块就不需要更改什么了 直接打印（this.tableData）就可以在控制台上查看数据变化

像后台提交数据这块直接根据index索引来提交对应的，修改params这块就好了

     params: {
          id: row.id,
          name: this.tableData[index].name,
          age:this.tableData[index].age
        }