VUE+Element UI实现简单的表格行内编辑
介绍
关于VUE+Element UI实现简单的表格行内编辑效果(即点击相应的行后,实现当前行的编辑),这个功能的实现可以用于编辑的时候,涉及少数内容的编辑,并且还有一个好处是不用新弹出一个窗口进行编辑,这就节省了一定的代码量。实现这一功能是借鉴了网上的一篇博客行内编辑效果,原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示。
实现
A.在样式表中加:
.tb-edit.el-input {
display: none;
}
.tb-edit.current-row.el-input {
display: block;
}
.tb-edit.current-row.el-input + span {
display: none;
}
B.在相应的el-table 中加:
class="tb-edit"
C.在对应的想要编辑的列加:
<template slot-scope="scope">
<el-input size="small" v-model="scope.row.name">
<span>{{scope.row.name}}</span>
</el-input>
</template>