JSON生成表單form-create的使用

一、安裝

我使用的是element UI ,安裝對應的UI版本

npm i @form-create/element-ui 

在main.js引入並全局註冊

import   formCreate   from   '@form-create/element-ui'

Vue . use ( formCreate ) 

 

二、使用

新建一個.vue 文件，採用的自定義按鈕，如果需要加loading在外圍的div的加

  <div
    v-loading="loadingArr.dialogLoading"
    element-loading-text="保存中"
    element-loading-background="rgba(255,255,255,0.8)"
    element-loading-spinner="el-icon-loading"
  >
    <ElButton @click="append1">追加組件</ElButton>
    <ElButton @click="disabled3">禁用方式3</ElButton>
    <!-- <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create> -->
    <!-- 通過emit監聽事件 -->
    <form-create
      v-model="fApi"
      :rule="rule"
      :option="option"
      :value.sync="value"
      @goods_name3-change="change"
    ></form-create>
    <div class="text-center">
      <ElButton aligen="center" @click="close">關閉</ElButton>
      <ElButton type="primary" @click="submit">提交</ElButton>
    </div>
  </div>

  data() {
    return {
      i: 0,
      loadingArr: { dialogLoading: false },
      // 實例對象
      fApi: {},
      //表單數據
      value: {},
      //表單生成規則
      rule: [],

      // 組件參數配置
      option: {
        // onSubmit: formData => {
        //   alert(JSON.stringify(formData));

        //   for (let key in this.value) {
        //     if (this.value[key] == undefined) {
        //       this.value[key] = "";
        //     }
        //   }
        //   console.log(this.value);
        // },
        submitBtn: false
        // resetBtn: true
      }
    };
  },
  mounted() {
    this.rule = [
      // 通過on監聽事件
      {
        type: "input",
        field: "goods_num",
        title: "商品數字",
        col: {
          // span: 12
        },
        props: {
          // disabled:false
        },
        validate: [
          {
            required: true,
            message: "輸入數字，不能爲空",
            pattern: new RegExp("^\\d+$")
          }
        ],
        on: {
          input: () => {
            console.log(this.fApi.getValue("goods_num"));
          }
        }
      },
      // 通過emit監聽事件
      {
        type: "input",
        field: "goods_name3",
        title: "商品名稱13",
        col: {
          span: 12
        },
        on: {
          input: () => {
            const goods_numrule = this.fApi.getRule("goods_num");
            if (this.fApi.getValue("goods_name3")) {
              this.fApi.set(goods_numrule.props, "disabled", false);
            } else {
              this.fApi.set(goods_numrule.props, "disabled", true);
            }
          }
        },
        validate: [{ required: false, message: "請輸入名稱" }],
        emit: ["change"]
      },
      {
        type: "input",
        field: "goods_name11",
        title: "商品名稱12",
        value: "jinyong",
        col: {
          span: 12
        },
        props: { disabled: true },
        validate: [{ required: false, message: "請輸入名稱" }]
      },
      {
        type: "datePicker",
        field: "create_time",
        title: "創建時間",
        col: {
          span: 12
        }
      },
      {
        type: "select",
        field: "cate_id",
        title: "產品分類",
        value: "",
        options: [
          { value: "104", label: "生態蔬菜", disabled: false },
          { value: "105", label: "新鮮水果", disabled: false }
        ]
      },
      {
        type: "datePicker",
        field: "date",
        title: "日期+時間",
        props: {
          type: "datetime"
        }
      }
    ];
    this.$nextTick(() => {
      const goods_numrule = this.fApi.getRule("goods_num");
      console.log(goods_numrule);
      this.fApi.set(goods_numrule.props, "disabled", true);
      this.fApi.set(goods_numrule.col, "span", 6);
      // goods_numrule.props.disabled = true
      // goods_numrule.props.disabled  = true
    });
  },
  methods: {
    disabled3() {
      const goods_numrule = this.fApi.getRule("goods_num");
      console.log(goods_numrule);
      goods_numrule.props.disabled = true;
    },
    append1() {
      this.i++;
      let newCom = this.$formCreate.maker.input(
        "新增" + this.i,
        "new" + this.i
      );
      // this.rule.push(newCom)
      this.fApi.append(newCom);
    },
    change() {
      console.log(this.fApi.getValue("goods_name3"));
    },
    submit() {
      let a = { name: "123", age: 12 };
      console.log(a);
      // console.log(this.value)
      this.fApi.submit((FormData, fApi) => {
        let obj = {};
        for (let key in FormData) {
          if (FormData[key] == undefined) {
            obj[key] = "";
          } else {
            obj[key] = FormData[key];
          }
        }
        console.log(obj);
      });
    },
    close() {
      this.loadingArr.dialogLoading = true;
    }
  }

注意：使用this.fApi.set(goods_numrule.props, "disabled", true)設置規則的時候，初始的時候要存在屬性，如rule裏面的props:{}和col:{}