Ant Design of Vue之带单元格编辑功能的表格EditableCell组件

需求：表格里面某一行或者某一个单元格可以编辑，新增一行数据，删除一行数据，并且有校验规则。Ant Design里面组件还是很强大的，但是一些细节就需要你结合所有的组件属性来摸索了。以上需求让我头疼了好一阵，尤其是校验的部分，但是写出来后成就感满满呢。赶紧分享给大家。组件实现了单行保存，批量保存。输入同步保存。还可以自定义校验规则哦。里面的表单类型目前只有我用到的，小伙伴们自己可以完善...

xiaoxinshuaiga

6394人浏览 · 2020-04-25 22:23:57

xiaoxinshuaiga · 2020-04-25 22:23:57 发布

需求：
表格里面某一行或者某一个单元格可以编辑，新增一行数据，删除一行数据，并且有校验规则。

在这里插入图片描述

Ant Design里面组件还是很强大的，但是一些细节就需要你结合所有的组件属性来摸索了。以上需求让我头疼了好一阵，尤其是校验的部分，但是写出来后成就感满满呢。赶紧分享给大家。

组件实现了单行保存，批量保存。输入同步保存。还可以自定义校验规则哦。里面的表单类型目前只有我用到的，小伙伴们自己可以完善的，大同小异。?

具体代码见gitHub，小伙伴也可以clone下来看看效果。如果有更好的想法请一定告诉我哦?

gitHub：editablecell组件

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^