是时候放弃 el-form 组件了

相信很多正在用 element-ui 组件的同学,都会用到过 el-form 表单组件,这个组件帮助我们完成了表单验证和表单提交功能,但是在用的时候,会发现一些不方便的地方,比如说验证规则无法方便地复用。

关于无法方便地复用

比如说我的表单需要一个手机号格式验证规则,如果我在一个页面里面使用了,我就在这个页面里面复制一遍这个规则,这个还好,但是如果我在项目中的另外一个页面中,还要用到这个规则,还要复制一遍,这就让人有些不开心了。而且接下来我要说的这个新包,他很好的解决了这个问题,你可以很方便的把自己的验证规则复用到很多页面,甚至很多项目中

还有就是设定规则比较复杂,我们要使用一个规则的时候,不仅需要在 el-form 组件上设置 rules, model 以及 ref 等属性,还要在 el-form-item 上设置 prop ,而且这里面有些是重复定义的变量,完全有优化和提升的空间。

新的选择

最近一段时间,在 Google 上找到了这么一款表单验证组件,初步试用下来,发现方便了很多,我们都知道,表单验证功能表单以及表单域的关联比较紧密,需要考虑数据的双向互通,以及错误数据的展示,要在已有的 element-ui 项目中,接入一个其他的项目来做,是很困难的,但是这款产品就简化了这个问题,因为 VueFormulate 是支持插件扩展的,首先它内置了一些比较漂亮的表单域,直接放在项目中也是没问题的,另外它还可以扩展使用其他的表单域,比如说 element-ui 中的文本输入框,数字输入框,级联选择器等等。

2021-07-04 20-52-54 的屏幕截图.png

更多内容,可以查看 VueFormulate 的 中文文档 ,最近这段时间刚刚翻译的。

融合 element-ui 和 VueFormulate

因为我们的项目就是用的 element-ui 开发的,为了保持风格统一,还要用到 VueFormulate 就需要这样的一个插件,所以我就开源了这样一个插件 formulat-el-ui,为了减少大家的使用困难,这个插件是遵循语义化版本2.0 规范的。项目 github 地址 ,如果无法访问,可以查看 gitee

logo.png

相关阅读

本作品采用《CC 协议》,转载必须注明作者和本文链接
大多数知识,不需要我们记住,只需要认知即可
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!