vue和iview结合动态生成表单

最新推荐文章于 2023-09-25 14:57:35 发布

遇见y2021

最新推荐文章于 2023-09-25 14:57:35 发布

阅读量3k

点赞数

分类专栏： Vue功能文章标签： vue iview 动态表单

本文链接：https://blog.csdn.net/m0_38081413/article/details/103288550

版权

本文介绍如何利用Vue和iView框架动态生成表单，包括myForm组件的构建，myFormItem组件用于根据不同类型创建表单元素，以及通过函数式组件myCtrl动态渲染。还涉及表单验证、逻辑处理以及用户输入后的值获取，提供了在实际项目中应用的思路和方法。

摘要由CSDN通过智能技术生成

	在项目中，表单作为用户输入占用很重要的一部分，目前的前端框架，基本对表单进行了一些简单的封装，如果输入项很多，以iview为例，会有一大堆的类似：

<FormItem label="Input">
            <Input v-model="formItem.input" placeholder="Enter something..."></Input></FormItem>

这样的标签，现在将用

{//input输入框
            type:'InputNumber',
            placeholder:"请数量",
            label:'数量',
            value:1,
            props:'num',
            isRequire:true,
            emptyTip:'数量不能为空'
          },

这样的输入来简化，配置表单的生成。
一、构建myform组建
新建myForm.vue文件
1、结合vue和iveiw的框架，根据需求，对表单分一列，两列，多列展示，需要设置变量cols,表单项前面的文字宽度也不一样，因此还需设置变量labelWidth,渲染表单（展示你想展示的内容），需设置变量formDatas,最后，用户完成输入后还需获取表单数据，需要设置变了formDataModel。到此，配置表单大致需要的变量已基本设置完成。
大致代码如下：

<Form ref="formValidate" :label-width="labelWidth" :model="formDataModel" class="leftLabel">
    <Row :gutter="32">
      <Col :span="cols" v-for="(item,index) in formDatas" :key="index">
        <myFormItem  :schema = "item" :key="index" :formObj="formDatas"></myForm