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>

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

1. 遍历 objs 然后显示在表格中
2. (问题部分)双击某一 单元格 的值,通过 editable 控制是否是可编辑状态

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

那么我的问题就是:

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

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

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

Answer 1

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

Answer 2

直接用h5的contenteditable属性

<span :contenteditable="editable(index)"></span>

Answer 3

通过index来判断,当你点击的时候可以获取到当前点击的index,然后在渲染的地方editable也要根据index来区分,不然你全局只有一个editable 那肯定要么都编辑,要么都不编辑

Answer 4

贴代码贴全，贴一下methods里面函数是怎么写的

Answer 5

editable 不能是true和false ,应该改成x-x1, 第几行-第几个，点击的时候把行和列发过去，然后判断即可
其外表格数据修改，不知道你要不要做正数，字符，图片之类的，如果做这些，提前做好逻辑，还有那些翻页，不然后面一直加，你会越写越难受

Answer 6

楼主可以参考我这个demo,element+vue简单实现表格编辑功能,https://segmentfault.com/a/11...