## 效果 ![20230801161207.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c15adda24094c4b9bc72cb0db4d272a~tplv-k3u1fbpfcp-watermark.image?) 也可以通过码上掘金继续查看(效果有所差距)。 [jcode](https://code.juejin.cn/pen/7262257447736180799) > 完整代码见文末 ## 实现思路 1. 使用两个表单分别用于实现修改和新增处理。 2. 通过一个`editIndex`变量判断是否是编辑状态来决定是否展示输入框，当点击指定行的修改后进行设置即可： ```vue ``` ```javascript edit(row, index) { if (this.editIndex > -1) { this.$message.warning('请先完成修改中的行') return } this.editRow = {...row} this.editIndex = index } ``` 3. 通过隐藏表头实现新增表格和修改表格的合并，同时表格数据只有`addRow`： ```vue ... ``` ## 实现细节讲解 1. 当无数据时只展示新增行： ![image-20230801162740429](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1620d0ef27c84112ad16e8f7800eb671~tplv-k3u1fbpfcp-zoom-1.image) 通过设置以下样式即可： ```css /deep/ .el-table__empty-block { display: none; } ``` 2. 新增或者修改数据行时增加行高用于显示校验信息： ![动画](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b369cb19f09a45659937e83436811d4d~tplv-k3u1fbpfcp-zoom-1.image) 行高通过以下样式进行控制，不处于新增或者修改状态时设置为 0 即可： ```css .add-table /deep/ .el-form-item { margin: 18px 0; } ``` 为了在修改时只设置修改行的行高，只需要只对输入框绑定样式即可： ```html

``` ## 完整代码 ```vue ```