普通用法

点击查看代码

<template>
  <div>
    <ygp-form ref="form" v-model="formData" :dic="dic" :option="option" @handleSave="handleSave"></ygp-form>
  </div>
</template>

export default {
  data() {
    return {
      dic: {
        dicData: [
          {
            label: "男",
            value: 0,
          },
          {
            label: "女",
            value: 1,
          },
        ],
      },
      formData: {
        name: "张三",
      },
      option: {
        title: "新增表单",
        labelWidth: "80px",
        operate: [
          {
            title: "保存",
            operate: "handleSave",
          },
        ],
        items: [
          {
            label: "姓名",
            prop: "name",
            rules: [
              {
                required: true,
                message: "请输入姓名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "性别",
            prop: "sex",
            type: "select",
            dicName: "dicData",
            options: [],
            labelKey: "label",
            valueKey: "value",
            rules: [
              {
                required: true,
                message: "请选择性别",
                trigger: "change",
              },
            ],
          },
          {
            label: "日期",
            prop: "date",
            type: "date",
            rules: [
              {
                required: true,
                message: "请选择日期",
                trigger: "change",
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    // 保存按钮
    async handleSave() {
      const { valid } = await this.$refs.form.submitForm();
      if (!valid) {
        return;
      }
      this.$message.success(JSON.stringify(this.formData));
    },
  },
};