给这个div加个padding,显得好看一点
实际开发过程中,你的表单不可能是这样一个个的写出来的
我们经常会通过一个系统,里面通过拖拽等方式生成一个表单页 ,这个表单页,最后把数据存储起来
这样表单就不能写死了,通过数据去生成渲染表单页,验证规则都要在数据里面存着,
要封装一个组件,只要传给他一个数据,就能把数据渲染成表单。
引入这个组件,注册并使用这个组件,传入的formList一般是在后端去获取的。
这里我们为了演示,直接在这里定义。
还有一个有子集的元素就是checkbox、radio。
目前是多选,怎么设置单选呢?需要给它绑定一个label
多选框的value是个数组
其他的组件自己根据需求再去加
把提交按钮直接做到里面。
重置的时候,先把list深拷贝一份。先引入clonedeep
上面方法改成initValueList数组的形式,然后下面做深拷贝。返回给valueList
提交要调用一个接口,提交的数据就是valueList,因为我们在表单上修改的都是他的值,
提交的时候需要先调用form表单的Validate来验证一下表单的规则。给这个表单加ref属性就可以获取到表单的实例
如果返回的为true就可以调用接口啦。
接口我们在内部去引入。剪切到组件内部。
调用方法,第一个参数是url,我们可以作为属性传进来。
String类型,且是必须的
then里面触发结果,把这个结果抛出去。
调用表单组件的时候传入url
有些验证是在服务端做的。node服务端判断 输入的用户名是否是lison,如果不是就返回 姓名不对。
以上就是我们动态表单的一种实现方式。通过给的列表传进去,就会渲染出对应的表单。
动态组件,我们后面还会讲到
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。