VUE+Element UI实现表格行内编辑

时间:2024-04-01 13:19:25

VUE+Element UI实现简单的表格行内编辑

介绍

关于VUE+Element UI实现简单的表格行内编辑效果(即点击相应的行后,实现当前行的编辑),这个功能的实现可以用于编辑的时候,涉及少数内容的编辑,并且还有一个好处是不用新弹出一个窗口进行编辑,这就节省了一定的代码量。实现这一功能是借鉴了网上的一篇博客行内编辑效果,原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示。

实现

A.在样式表中加:
VUE+Element UI实现表格行内编辑
B.在相应的el-table 中加:
VUE+Element UI实现表格行内编辑
C.在对应的想要编辑的列加:
VUE+Element UI实现表格行内编辑

相关文章