element UI表单组件的二次封装

hhh-ui

这是一个基于elementUI二次封装的组件，可以快速实现你想要的表单功能 github地址!，如果对你有帮助，不要忘记给个星星啊，哈哈哈。持续更新中，这个组件我更新了一个新版本,功能更全，文档也更清楚。

安装 hhh-ui

cnpm install hhh-ui -S

全局注册（在main.js引用）：

import HhhUi from 'hhh-ui'
Vue.use(HhhUi)

页面引用

<hhh-form ref="myform" :reformRule="reformRule" :formData="formData" reform="reform"></hhh-form>

props：

reform：表单的ref属性
    reformRule：表单校验规则默认，{}
        eg：{
            phone: [
                { required: true, message:'错误提示', trigger: 'blur' },
                或者
                {
                    validator: 自定义校验规则，可以参考element的校验规则,
                    required: true,//是否必填
                    trigger: 'blur'//触发校验的方式
                }
            ],
        }
    formData：form表单的值，Array 必填
        eg:[
            {
            name: "输入框", // 文字label
            type: "input", // input，select,textarea,checkbox,radio,time,citypicker
            field: "id", // 字段名称
            value:'', //输入框的初值
            isshow: false, // 是否展示
            width: false, // 文本宽度
            disabled: false, // 是否禁用
            placeholder: "请输入", // placeholder提示
            multiple: false, // 是否多选，基于select，checkbox
            filterable: false, // 是否多选，基于select
            ajax: {//动态获取接口数据，基于select，checkbox
              method: 'get',//请求方式
              url: 'www.xx.cn',//接口地址
              data: {},//请求参数
              label: 'label',//下拉选择框的选择文字
              value: 'value',//下拉选择的值
              callback: function(data) {//接口返回数据层级处理
                return data
              },
            }
          }
        ]

写一个粗超的页面，实现效果如下：

代码实现：

<template>
      <hhh-form ref="myform" :reformRule="reformRulea" :formData="formDataA" reform="reform"></hhh-form>
      <div class="btn" @click="saveform">保存</div>
</template>

export default {
    data() {
        return {
            formDataA: [
                {
                  type: "input", // 普通输入框
                  field: "phone",
                  name: "手机号码：",
                  divwidth:"100%",
                  width:'460',
                  value: ""
                },
                {
                  type: "input", // 普通输入框
                  field: "username",
                  name: "姓名：",
                  divwidth:"100%",
                  width:'460',
                  value: ""
                },
                {
                  value: "",
                  divwidth:"100%",
                  width:'460',
                  type: "select", // 普通下拉框
                  field: "status",
                  name: "性别：",
                  options: [
                    {
                      label: "男",
                      value: 0
                    },
                    {
                      label: "女",
                      value: 2
                    }
                  ]
                },
                {
                  value: "",
                  divwidth:"100%",
                  width:'460',
                  type: "radio", // 单选
                  field: "status",
                  name: "性别：",
                  options: [
                    {
                      label: "男",
                      value: 0
                    },
                    {
                      label: "女",
                      value: 2
                    }
                  ]
                }
              ],
              reformRulea:{
                phone: [
                  {
                    validator: FormValidate.phone,
                    required: true,
                    trigger: 'blur'
                  }
                ],
                username: [
                  {
                    validator: FormValidate.username,
                    required: true,
                    trigger: 'blur'
                  }
                ],
                businessName: [
                  {
                    validator: FormValidate.businessName,
                    required: true,
                    trigger: 'blur'
                  }
                ]
            }
        }
    }，
    methods：{
          saveform() {
            let formData = this.$refs.myform.submitForm();
            //然后将forData放到你的ajax请求当中
        }
    }
}

如果这篇文章对你有帮助，点个赞吧，哈哈哈