元素添加contenteditable属性之后点击即可进入编辑状态
像这种只修改一条属性不必再打开弹框进行编辑,使用contenteditable会很方便
添加失焦、回车、获焦事件
如
<p :contenteditable="item.contenteditable || false"
@keydown.enter="key($event)"
@focus="focus(scope.row.id, item.prop, $event)"
@blur="blur(scope.row.id, item.prop, $event)"
>{{scope.row[item.prop]}}</p>
$event.target.innerText可以获取到元素的值 结合id...等即可满足部分需求
灰常好用
不过我使用的时候有一个bug
更改之后调用getlist—重新获取表格数据
的时候,被contenteditable所更改的属性值会固定、
我排序的时候数据排序属性值并未更新,切换页码才会更新
在getlist用各种刷新、重赋值都没用
,重置在赋值没用。深拷贝也没用,$forceUpdate也没用
最后在getlist之前,修改排序属性之后让表格数据为空
才解决这个bug
总结 挺好用