vue中table表格内编辑问题

Question

需求,如题:

就是实现 table 表内编辑

我的问题:

先看代码

<tbody>

    <tr v-for="obj in objs" :key="obj">

        <td @dblclick="changeEditable">

            <input v-show="editable" v-model="obj.label" @keyup.enter="changeEditable"/>

            <span v-show="!editable"  v-model="obj.label">显示内容</span>

        </td>

    </tr>

</tbody>

代码简化了很多,功能就是:

遍历 objs 然后显示在表格中

(问题部分)双击某一 单元格 的值,通过 editable 控制是否是可编辑状态

按照上面的写法, 双击某一个 单元格 时, 整列 都会处于编辑状态,很尴尬

那么我的问题就是:

如何实现双击某一单元格时, 只让该单元格的值处于编辑状态?

注意: editable 不能作为 obj 的属性存在

修改问题, 这里不删除上面这里的 注意, 因为当初是这么想的, objs 是从其他地方获取的,无法更改里面的数据, 所以想当然的以为 obj 中的属性也无法更改,其实是可以添加属性的!

Answer 1

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