VUE+Element UI实现简单的表格行内编辑效果的示例的代码

原理是通过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
}
  



  
    
      
 
      
      
 
      
      
 
      
      
 
      
    
    
数据:{{tableData}}



 

根据原理自定义效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。