文档驱动 —— 表单组件(三):基于原生html的表单组件demo


做增删改查要写多少代码?

一个表单一套代码,十个表单十套代码吗?

我这么懒,怎么会写这么多代码?
我想做到:即使一百个表单也只需要一套代码(而且不需要复制粘贴)。实现多个表单,只需要加载不同的meta即可。

Meta结构部分上一个已经写了,这里说一下如何做表单。

表单demo

先做两个简单的表单,一个是公司信息,一个是员工信息。
代码很简单,先做一个简单的菜单:

菜单

    

表单

然后用v-for把循环出来,然后把组件放进去,

    
{{item.title}}:

加载json

然后在setup里面加载json,设置好meta,再顺便动态创建一个model,就ok了。


运行效果。

点击菜单,并不是切换“页面”,也不是切换组件,而是更改meta,meta一变,表单就变了,是不是很简单,这样表单再多也不用担心做不过来了

Model

可以事先做好放在meta里面,也可以动态创建出来,我这么懒当然选择动态创建了。简单结构的model都是没啥问题的。

one more thing

后面要做查询组件了,这个更牛叉。

相关