请选择 进入手机版 | 继续访问电脑版

element Form组件封装

[复制链接]
来自北方 发表于 2020-12-31 18:14:46 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
 
Form 表单

由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据
典范表单
包罗各种表单项,比如输入框、选择器、开关、单选框、多选框等。
在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种范例的表单控件,包罗 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
扩展性极强的表单
 


  • 编辑Form.vue文件
  1.                                                     -                                                                                                  立即创建    取消  
复制代码
  1.    data() {      return {        form: {          name: '',          region: '',          date1: '',          date2: '',          delivery: false,          type: [],          resource: '',          desc: ''        }      }    },    methods: {      onSubmit() {        console.log('submit!');      }    }
复制代码
 


  • 设置路由
  • 页面样式

TIPS

  • 表单组件是由各个el-form-item组成
  • el-form-item有许多种范例,输入框、下拉框等
  • 属性主要有两个部分组成,数据绑定部分,通过model属性来绑定需要传给配景的那一串对象。form就是绑定的表单对象    model:表单数据对象
  • el-form-item 由label和v-model,label就是表单形貌;表单的提交,v-model就是数据双向绑定通过输入框或下拉框输入选择更新到form上面,背面提交表单,直接把form对象传递给配景。


  • 对它举行表单验证
element表单验证
在防止用户犯错的前提下,尽大概让用户更早地发现并改正错误
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
  1. rules: {          name: [            { required: true, message: '请输入活动名称', trigger: 'blur' },            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }          ],          region: [            { required: true, message: '请选择活动区域', trigger: 'change' }          ],          date1: [            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }          ],          date2: [            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }          ],          type: [            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }          ],          resource: [            { required: true, message: '请选择活动资源', trigger: 'change' }          ],          desc: [            { required: true, message: '请填写活动形式', trigger: 'blur' }          ]        }      };    }
复制代码
 
自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成暗码的二次验证。
  1.    data() {      //定义一个函数,每次渲染data部分先执行这个函数,来校验规则      var checkAge = (rule, value, callback) => {         if (!value) {          return callback(new Error(&#39;年岁不能为空&#39;));        }        setTimeout(() => {          if (!Number.isInteger(value)) {            callback(new Error(&#39;请输入数字值&#39;));          } else {            if (value < 18) {              callback(new Error(&#39;必须年满18岁&#39;));            } else {              callback();            }          }        }, 1000);      };       //如果validatePass,通过之后启动一个回调函数      var validatePass = (rule, value, callback) => {//规则,校验值,校验通过之后回调函数        if (value === &#39;&#39;) {          callback(new Error(&#39;请输入暗码&#39;));        } else {          if (this.ruleForm.checkPass !== &#39;&#39;) {            this.$refs.ruleForm.validateField(&#39;checkPass&#39;);          }          callback();        }      };      var validatePass2 = (rule, value, callback) => {        if (value === &#39;&#39;) {          callback(new Error(&#39;请再次输入暗码&#39;));        } else if (value !== this.ruleForm.pass) {          callback(new Error(&#39;两次输入暗码不一致!&#39;));        } else {          callback();        }      };      return {        ruleForm: {          pass: &#39;&#39;,          checkPass: &#39;&#39;,          age: &#39;&#39;        },        rules: {          pass: [            { validator: validatePass, trigger: &#39;blur&#39; }          ],          checkPass: [            { validator: validatePass2, trigger: &#39;blur&#39; }          ],          age: [            { validator: checkAge, trigger: &#39;blur&#39; }          ]        }      };    },    methods: {      submitForm(formName) {        this.$refs[formName].validate((valid) => {          if (valid) {            alert(&#39;submit!&#39;);          } else {            console.log(&#39;error submit!!&#39;);            return false;          }        });      },      resetForm(formName) {        this.$refs[formName].resetFields();      }    }
复制代码
 


  • 思路:如何举行表单组件封装?

  • 把它设计成一个对象数组;
  • 数据绑定部分是form,校验规则rules和label欠好显示在form上面;
  • 定义一个对象,存放封装组件使用到的一些属性;
  • 表单范例有许多种,需要通过v-if判断循环的范例;


  • 封装好后完整代码如下
  1.                                                                                     
复制代码
  1.   data() {            return {                form: {                    name: &#39;&#39;,                    region: &#39;&#39;,                    date1: &#39;&#39;,                    date2: &#39;&#39;,                    delivery: false,                    type: [],                    resource: &#39;&#39;,                    desc: &#39;&#39;                },                formLabel: [                    {                        label: &#39;活动名称&#39;,                        key: &#39;name&#39;,                         type: &#39;input&#39;                    },                    {                        label: &#39;活动区域&#39;,                        key: &#39;region&#39;,                        type: &#39;select&#39;,                        options: [                            {                                label: "区域1",                                value: &#39;shanghai&#39;                            },                            {                                label: "区域2",                                value: &#39;beijing&#39;                            }                        ]                    },                    {                        label: &#39;活动时间&#39;,                        key: &#39;data1&#39;,                        type: &#39;date-picker&#39;                    }                ],            }        },        methods: {            onSubmit() {                console.log(&#39;submit!&#39;);            }        }
复制代码


来源:https://blog.csdn.net/jianjian_5201314/article/details/111917426
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )