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

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>