普通用法

点击查看代码

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

export default {
  data() {
    return {
      dic: {
        level: [
          {
            name: "一年级",
            code: 1,
          },
          {
            name: "二年级",
            code: 2,
          },
        ],
        name: []
      },
      formData: {},
      option: {
        title: "新增表单",
        labelWidth: "80px",
        operate: [
          {
            title: "保存",
            operate: "handleSave",
          },
        ],
        items: [
          {
            label: "年级",
            prop: "level",
            type: "select",
            dicName: "level",
            options: []
          },
          {
            label: "童鞋",
            prop: "name",
            type: "select",
            dicName: "name",
            options: [],
          },
        ],
      },
    };
  },
  methods: {
    // 保存按钮
    async handleSave() {
      const { valid } = await this.$refs.form.submitForm();
      if (!valid) {
        return;
      }
      this.$message.success(JSON.stringify(this.formData));
    },
    // 表单改变事件
    handleChange(value, name, option) {
      if (name === "level") {
        this.dic.name = value === 1 ? [
          {
            name: "小明",
            code: 1,
          },
          {
            name: "小强",
            code: 2,
          },
        ] : [
          {
            name: "大明",
            code: 1,
          },
          {
            name: "大强",
            code: 2,
          },
        ]
      }
    },
  },
};