VUE+Element-ui实战之el-table行内编辑

对于一些字段比较多的数据来说,通常需要弹窗来添加或编辑;VUE+Element-ui实战之新增弹出框和编辑弹出框共用一个组件

对于简单字段的采用行内编辑显然开发量会更少一些!

主要参考示例:vue+element table行内编辑

想要实现行内编辑先要理清思路:

1、点击编辑时,各字段需要由文本状态变为可编辑状态,因此需要有一个标识isEdit;

2、编辑状态下,应该有保存按钮,点击保存按钮之后,数据由可编辑状态变为静态文本;

3、点击添加按钮时,el-table需要追加一行空白可编辑状态的数据;

参考代码






最终效果

VUE+Element-ui实战之el-table行内编辑_第1张图片

 

你可能感兴趣的:(Element,vue,行内编辑,el-table)