Vue Element Table封装 删改数据

只是用了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等其他标签