（简单好用）基于VUE 2 Element Ui 的Form表单组件

众所周知，摸鱼，偷懒，能写BUG是一个优秀前端的基本素养，Vue让前端程序员可以更加光明正大的偷懒了，组件化开发让我们可以封装一个又一个的组件，那组件肯定是得封装的方便又好用,不然怎么可以一次又一次的copy paste呢，这就给各位吴彦祖刘亦菲分享一个最近封装的表单组件，支持表单验证（可自定义），用法和Element Ui的form表单差不多但更省事更有助于咱摸鱼，收藏点赞都点点噻~
 

Form.vue(组件本体)

<template>
  <div class="ds-form">
    <div class="header">
      <slot name="header" />
    </div>
    <el-form
      :label-width="labelWidth"
      :model="formData"
      ref="ruleForm"
      :rules="rules"
    >
      <el-form-item
        v-for="item in formItems"
        :key="item.field"
        :prop="item.field"
        :label="item.label"
      >
        <template v-if="item.type === 'input' || item.type === 'password'">
          <el-input
            v-model="formData[`${item.field}`]"
            style="width:250px"
            :placeholder="item.placeholder"
            v-bind="item.otherOptions"
            :maxlength="item.maxlength"
            :show-password="item.type === 'password'"
          />
        </template>
        <template v-else-if="item.type === 'select'">
          <el-select
            v-model="formData[`${item.field}`]"
            :placeholder="item.placeholder"
            v-bind="item.otherOptions"
            style="width: 100%"
          >
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :value="option.value"
              >{{ option.title }}</el-option
            >
          </el-select>
        </template>
        <template v-else-if="item.type === 'datepicker'">
          <el-date-picker
            v-model="formData[`${item.field}`]"
            style="width: 100%"
            v-bind="item.otherOptions"
          />
        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="footer">
      <slot name="footer" />
    </div>
  </div>
</template>
  
  <script>
export default {
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
    formItems: {
      type: Array,
      default: () => [],
    },
    labelWidth: {
      type: String,
      default: "120px",
    },
    rules: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      formData: {},
    };
  },
  created() {
    this.formData = { ...this.value };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("submitForm", this.formData);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
  

 这个是组件本体直接在components里面创建文件贴进去就可以拉，使用方法在下面~

首先我们创建组件需要参数的js（）
 

export const companyForm = {
  formList: [
    {
      field: "companyName",//字段ID
      label: "公司名称",//Form的label
      type: "input",//需要的数据类型(input:普通输入框,password:密码输入框,select:下拉选择器,datepicker:日期选择器
      placeholder: "请输入公司名称",//这个都看得懂吧
    },
    {
      field: "identify",
      label: "纳税人识别号",
      type: "input",
      placeholder: "请输入纳税人识别号",
    },
    {
      field: "tel",
      label: "手机号",
      type: "input",
      placeholder: "请输入手机号",
      maxlength: 11,
    }
  ],
  rules: {//这里的全都参考Element Ui
    companyName: [
      {
        required: true,
        message: "公司名称不能为空",
        trigger: ["blur", "change"],
      },
    ],
    identify: [
      {
        validator: (rule, value, callback) => {//自定义验证
          if ((value == "")) {
            return callback(new Error("请输入纳税人识别号"));
          }
          console.log(value,rule)
          var reg = /^[A-Z0-9]{15}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/;
          var state = reg.test(value);
          console.log(state);
          if (!state) {
            callback(new Error("纳税人识别号格式错误"));
          } else {
            callback();
          }
        },
        trigger: ["blur", "change"],
      },
    ],
    tel: [
      { required: true, message: "请输入手机号", trigger: ["blur", "change"] },
      {
        min: 11,
        message: "手机号格式错误!",
        trigger: ["blur", "change"],
      },
    ],
  },
};

 最后我们在引入组件

局部注册

<template>
 <Form :formItems="companyForm.formList" :value="ruleForm" :rules="companyForm.rules" @submitForm="submitForm"></Form>
</template>

<script>
import Form from "@/components/Form/Form";
import { companyForm } from "./config/vForm";

export default {
    components: {
      Form
    },
    data(){
        return{
          ruleForm: {
            companyName: "",
            tel:"",
            identify:"",
          },
          companyForm
        }
    }
    methods: {
        submitForm(data){
          console.log('submitForm',data)//此时就会在控制台输出表单中输入或选择出的数据
        },
    }
}
</script>

bingo√
这样就可以用啦