![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0784d4a999af4164b89b0505a399ac78~tplv

记录一下el-table的踩坑经历~element-ui官方文档给出了基础的el-table的合并行的例子，但是hover样式是存在问题的，看了各种解决方案，最终整理出一套相对简单的解决方案，希望对大

说明 可编辑行表格说明： 通过代码控制每次只能编辑一行，避免性能问题 姓名：无验证规则 账号：必填且执行异步验证 邮箱：必填且必须时邮箱 确认邮箱：必填且必须时邮箱且两次邮箱必须输入的一样 效果 代码

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第N天，点击查看活动详情 >>PS：第9天。 1、新增表格行 这这里我是给按钮添加了点击事件给tableDatapush进一个空数组

最近开发新业务，看到有些功能一样的表格，想着封装一个组件，记录一下： 大概实现是： 封装一个通用的表格 接收两个数组， 一个控制行数，一个控制列数 表格可进行编辑操作 官方文档 图中我们可以看到： :

问题描述 有一个简单的表格，产品要求实现双击可编辑 看了一下网上的帖子，大多数都是搞两部分dom，一块是输入框，用于编辑状态填写；另一块是普通标签，用于在不编辑显示状态下呈现单元格文字内容。再加上一个

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情 近期在做项目的时候遇到需要再表格内编辑的需求。考虑对el-table进行二次封装以实现上述需求。记录一下

又重复写模版了... table 作为数据展示组件，在日常开发中经常被用到，通过这篇文章，可以看到结合 vue 的 slot/component 特性，做一层封装，可以大大简化 table 的使用，大部分时候只需写一个配置属性就可以了。

需求 点击table表格中的编辑时，表格中的上级部门可以替换位置。而且添加成功后，表格之前的状态不能改变（可以理解为展开项不变） 添加子部门时，也可以替换位置，添加成功后，要求同上。 解决问题思路 首