Vue + ElementUI 实现可编辑表格及校验

效果

完整代码见文末

实现思路

1. 使用两个表单分别用于实现修改和新增处理。

2. 通过一个editIndex变量判断是否是编辑状态来决定是否展示输入框，当点击指定行的修改后进行设置即可：

   edit(row, index) {
     if (this.editIndex > -1) {
       this.$message.warning('请先完成修改中的行')
       return
     }
     this.editRow = {...row}
     this.editIndex = index
   }
   

3. 通过隐藏表头实现新增表格和修改表格的合并，同时表格数据只有addRow：

   
       ...
   
   

实现细节讲解

1. 当无数据时只展示新增行：

   

   通过设置以下样式即可：

   /deep/ .el-table__empty-block {
   	display: none;
   }
   

2. 新增或者修改数据行时增加行高用于显示校验信息：

   

   行高通过以下样式进行控制，不处于新增或者修改状态时设置为 0 即可：

   .add-table /deep/ .el-form-item {
     margin: 18px 0;
   }
   

   为了在修改时只设置修改行的行高，只需要只对输入框绑定样式即可：

   <div v-if="$index === editIndex" class="validate-info">
     <el-form-item :prop="column.prop">
       <el-input v-model="editRow[column.prop]"/>
     el-form-item>
   div>
   

完整代码