vue和iview结合动态生成表单实例

更新时间：2022年10月10日 17:00:42 作者：遇见y2021

这篇文章主要介绍了vue和iview结合动态生成表单实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

一、构建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"></myFormItem>
      </Col>
    </Row>
</Form>

2、一般情况下每个表单的下面都会有操作，比如确定，取消等，这样我们可以用slot插入来实现不同引用页面的功能

<section>
      <slot name="btnCancel" :cancelFormBtn="cancelForm"><Button type="default">取消</Button></slot>
      <slot name="btnSave" :saveFormBtn="saveForm"><Button type="primary">确定</Button></slot>
</section>

这样myform组件就大致完成，在上面的myform组建中，有一个myFormItem 的组建，下面我们就来实现myFormItem。

二、构建myFormItem组建

新建myFormItem.vue文件

myFormItem中，由于表单项有很多种，包括input,select,checkBox等，如果在这个组建中用v-if来控制显示，这样这个页面很臃肿，因此，采用函数式组建来和render函数来动态构建不同类型的表单

因此myFormItem组建代码大致如下：

<my-contrl :schema="schema" :formObj="formObj"></my-contrl>

三、构建函数式组件mycontrl组件

新建myContrl.js文件

函数式组件的大致结构如下，首先根据context中的类型进行分发，然后再用渲染函数渲染出来

function getControl(context){
    let {type,label,placeholder,value} = context.props.shema;
    return {type,label,placeholder,value}
}
export default{
    functional:true,
    props:{
    schema:Object
    },
    render(h,context){
        let {type,label,placeholder,value} = getControl(context);
        return h('FormItem',{
                 props:{
                    label:label,
                      },
           },[
            h(type,{
            placeholder:placeholder,
             value:value,
            })
        ])
    }
}

中间需注意的小细节：

1、由于一般设置必填项和非必填项的样式不一致，如果要用到iview里面的样式，需要在formItem下加class:‘ivu-form-item-required’,代码如下：

class:{
        'ivu-form-item-required':isRequire,
      },

2、如果表单项是select，checkBox等，在select下面会有option属性，因为都是动态输入的值，所以，要用render函数动态生成数组

keyValue.map(item=>{
        return h(keyData,{
          props:{
           [keyData==='Option'?'value':keyData==='Button'?'icon':'label']:item.key,
          }
        },item.label)
      })

到此，静态页面的渲染也就完成了。

四、用户输入的时候需要对表单项中进行各种验证或者逻辑

为了实现此功能，一般我们用到vue中的混入，将公用的验证，逻辑写到同一个文件中，再将每个表单中单独的逻辑放到引用这个表单的vue中。

因此在mycontrl.js文件的render函数中，要为每个表单项注册一个on-change或on-blur事件，然后触发对应的函数，并且设置此表单的对象的值。

1、设置表单项的值

context.parent.setValue(context.data.attrs.formObj,props,val);

2、判断是否必填进行操作

if(val==='' || val===null || val.length===0){
    context.parent.Validate('rule-empty',`${label}id`,emptyTip);
     return;
   }else{
     context.parent.ValidateHide('rule-empty',`${label}id`)
}

3、规则验证判断

for(let r = 0;r<rules.length;r++){
 let flag = rules[r].valide(val);
  if(flag){
   context.parent.ValidateHide(`rule-${rules[r].name}`,`${label}id`)
    }else{
    context.parent.Validate(`rule-${rules[r].name}`,`${label}id`,rules[r].tip);
     break;
   }
  }
 return;

4、逻辑判断

logicRelation(val)

像类似前面的Validate，ValidateHide,setValue这些函数，都放在混入的js函数中，作为公共函数，而逻辑，规则下的验证函数就放在了每个配置表单的配置项里面了。以上所有的判断都写作on-blur或on-change中

五、表单输入完成获取表单中的值

这个写在myForm.vue中

1、在计算属性中，取得这个表单的项和值

computed:{
    formDataModel:function(){
    return this.getValue(this.formDatas);
      }
   }

2、点击确定按钮的时候，将这个值返回到传入确定按钮的这个函数中

    saveForm(fn,errFn){
        let _this = this;
        if(_this.isValidData(_this.formDatas,_this.formDataModel)){
          fn(_this.formDataModel)
        }else{
          _this.$Message.error('表单输入有误！请按页面提示输入')
          if(errFn){
            errFn()
          }
        }
      }

3、取消按钮，将值还原，或者是别的需要的操作

cancelForm(type,fn){
  if(type==='modify'){
    fn()
 }else if(type==='close'){
 this.$emit('closeModel')
  }else{
   this.backDefault(this.defaultValCopy,this.formDatas);
  }
}

六、在要用到表单的页面使用

        <my-form :formData="formDatas" :cols="12" :labelWidth="100">
            <template v-slot:btnCancel ="{cancelFormBtn}">
              <Button type="default" @click="cancelFormBtn('modify',getlist)">取消</Button>
            </template>
            <template v-slot:btnSave ="{saveFormBtn}" >
              <Button type="primary" @click="saveFormBtn(save)">保存</Button>
            </template>
         </my-form>

配置项中的formData格式

       [ {
            type:'InputNumber',
            placeholder:"Web",
            label:'Web',
            value:1,
            props:'web',
            isRequire:true,
            emptyTip:'Web不为空'
          },
          {//select选择框
            type:'Select',
            placeholder:"请选择要输入内容",
            label:'记录',
            data:{
              Option:[
              {key:'1',label:'记录'},
              {key:'0',label:'不记录'},
            ]
            },
            value:'1',
            props:'record',
            isRequire:true,
            emptyTip:'请选择',
            logicRelation:this.isHideKafka
          }]

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue页面首次载入优化的全过程
凡是做SPA的项目,特别是移动端的SAP项目,首屏加载速度必定是一个绕不过去的话题,下面这篇文章主要给大家介绍了关于Vue页面首次载入优化的相关资料,需要的朋友可以参考下
2021-12-12
vue跳转后不记录历史记录的问题
这篇文章主要介绍了vue跳转后不记录历史记录的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue @click @tap重叠事件区分方式
这篇文章主要介绍了vue @click @tap重叠事件区分方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue实现把页面导出成word文件的方法
这篇文章主要为大家详细介绍了vue实现把页面导出成word文件的方法,文中的实现步骤讲解详细,并且有详细的代码示例,需要的小伙伴可以参考一下
2023-10-10
Vue实现模糊查询-Mysql数据库数据
这篇文章主要介绍了基于Vue实现Mysql数据库数据模糊查询,下面文章我们主要实现的是输入框中输入数据，根据输入的结果模糊搜索数据库对应内容，实现模糊查询，感兴趣的小伙伴可以进入文章我们一起学习
2021-12-12
vue中实现点击变成全屏的多种方法
这篇文章主要介绍了vue中实现点击变成全屏的多种方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
前端token中4个存储位置的优缺点说明
这篇文章主要介绍了前端token中4个存储位置的优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue3实现可视化拖拽标签小程序功能
这篇文章主要介绍了Vue3实现可视化拖拽标签小程序,实现功能可视化标签拖拽，双击标签可修改标签内容，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-09-09
Element Cascader 级联选择器的使用示例
这篇文章主要介绍了Element Cascader 级联选择器的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
vue中input type=file上传后@change事件无效的解决方案
这篇文章主要介绍了vue中input type=file上传后@change事件无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05