只是用了input标签 定义了class: editing样式 input双向绑定源数据 点击编辑后进入editing状态 并且原本数据会被临时储存
点击确定时直接退出编辑状态 因为input是双向绑定原始数据的, 点击取消时临时储存的数据又会覆盖回原本数据达到还原效果
完整代码示例
注意 是 vue-element-EditableTable分支
https://gitee.com/LLIYY/WebPackTemplate.git
clone代码
git clone -b - vue-element-EditableTable https://gitee.com/LLIYY/WebPackTemplate.git
核心部分就是table绑定数据中,如果是可编辑的字段,则需要放在editableData对象中,并且使用vue插槽把字段样式插入到封装好的table组件中
其中没有把字段代码一起封装,是因为考虑到可能有时候需要使用select而不是input等其他标签