element的表格index自定义_VUE+Element UI实现简单的表格行内编辑效果-阿里云开发者社区...

demo

原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示

* {

margin: 0;

padding: 0

}

body {

font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;

overflow: auto;

font-weight: 400;

-webkit-font-smoothing: antialiased;

}

.tb-edit .el-input {

display: none

}

.tb-edit .current-row .el-input {

display: block

}

.tb-edit .current-row .el-input+span {

display: none

}

{ {scope.row.date}}

{ {scope.row.name}}

{ {scope.row.address}}

删除

数据:{ {tableDa