vue中table表格内编辑问题

Question

需求,如题:就是实现table表内编辑
我的问题:先看代码
显示内容
代码简化了很多,功能就是:
遍历objs然后显示在表格中
(问题部分)双击某一单元格的值,通过editable控制是否是可编辑状态
按照上面的写法,双击某一个单元格时,整列都会处于编辑状态,很尴尬
那么我的问题就是:
如何实现双击某一单元格时,只让该单元格的值处于编辑状态?
注意:editable不能作为obj的属性存在
修改问题,这里不删除上面这里的注意,因为当初是这么想的,objs是从其他地方获取的,无法更改里面的数据,所以想当然的以为obj中的属性也无法更改,其实是可以添加属性的!

Answer 1

editable类型为数组，改成v-show="editable[index]"，外面的v-for改为v-for=(obj,index)inobjs,在方法里传入index，changeEditable(index),修改显示状态的时候记得要使用vue.$set来设置

Answer 2

直接用h5的contenteditable属性