基于element ui 开发的二次通用表单组件

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <nav-left />
        </el-aside>
        <el-main>
          <AddDialog
            :formModel="formModel"
            :ruleArray="ruleArray"
            @submitForm="submitForm"
          />
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavLeft from "@/components/navLeft.vue";
import AddDialog from "@/components/AddDialog.vue";
import { Promise } from "q";
import { resolve } from "url";

let validatePhone = (rule, value, callback) => {
  if (value && value.trim() && !/^1[34578]\d{9}$/.test(value)) {
    callback(new Error("请输入正确的手机号"));
  } else {
    callback();
  }
};

let validateEmail = (rule, value, callback) => {
  if (
    value &&
    value.trim() &&
    !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)
  ) {
    callback(new Error("请输入正确的邮箱号"));
  } else {
    callback();
  }
};
export default {
  name: "Home",
  data() {
    return {
      val: "",
      info: "",
      //表单字段写死，后台取值之后直接给value赋值即可
      formModel: [
        {
          title: "姓名",
          file: "name",
          type: "input",
          value: "",
        },
        {
          title: "年龄",
          file: "age",
          type: "input",
          value: "",
        },
        {
          title: "邮箱",
          file: "email",
          type: "input",
          value: "",
        },
        {
          title: "手机号",
          file: "mobile",
          type: "input",
          value: "",
        },
        {
          title: "性别",
          file: "sex",
          type: "select",
          value: "",
          selectList: [
            { value: "1", label: "男" },
            { value: "0", label: "女" },
          ],
        },
        {
          title: "状态",
          file: "enabled",
          type: "select",
          value: "",
          selectList: [
            { value: "1", label: "启用" },
            { value: "0", label: "停用" },
          ],
        },
      ],
      ruleArray: {
        name: [{ required: true, message: "请输入姓名" }],
        enabled: [{ required: true, message: "请选择状态" }],
        mobile: [{ validator: validatePhone }],
        email: [{ validator: validateEmail }],
      },
    };
  },
  components: {
    NavLeft,
    AddDialog,
  },
  created() {
    this.getInfo();
  },
  methods: {
    async getInfo(fn) {
      //模拟后台获取到个人信息
      let ret = await this.getData(() => {
        this.info = {
          name: "张三",
          age: "18",
          sex: "0",
          mobile: "13588450166",
          email: "",
          enabled: "1",
        };
      });
      //在form表单字段绑定
      for (let key in this.info) {
        let ret = this.formModel.filter((item) => {
          return item.file === key;
        });
        if (ret) {
          ret[0].value = this.info[key];
        }
      }
      return ret;
    },
    getData(fn) {
      return new Promise((resolve) => {
        setTimeout(() => resolve(fn()), 2000);
      });
    },
    submitForm(val) {
      this.info = val;
    },
  },
};
</script>

<style lang="less" scoped></style>