使用form-create时修改表单数据

FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定

FormCreate官网：https://www.form-create.com

帮助文档：https://form-create.com/v3/

1. 通过v-model修改表单数据

<template>
  <div>
    <p>formData: {{ value }}</p>
    <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value">
      <template #type-btns>
        <ACol :push="3" style="margin-bottom: 20px;">
          <AButton @click="changeValue">修改 field1</AButton>
          <AButton @click="changeForm" style="margin-left:20px;">修改表单</AButton>
        </ACol>
      </template>
    </form-create>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      value: {field1: '111', field2: '222', date: '2023-10-23'},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        },
        resetBtn: true
      },
      rule: [
        {type: 'input', field: 'field1', title: 'field1', value: ''},
        {type: 'input', field: 'field2', title: 'field2', value: ''},
        {type: 'datePicker', field: 'date', title: 'date', value: ''},
        {type: 'btns'},

      ]
    }
  },
  methods: {
    changeValue() {
      this.value.field1 += '-a'
    },
    changeForm() {
      this.value = {field1: '666', field2: '666', date: '2023-09-23'}
    }
  }
}
</script>

 

2. 通过formData设置表单默认值

<template>
  <div>
    <p>formData: {{ value }}</p>
    <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value">
    </form-create>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      value: {},
      options: {
        formData: {field1: '666', field2: '666', date: '2023-09-23'},
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        },
        resetBtn: true
      },
      rule: [
        {type: 'input', field: 'field1', title: 'field1', value: ''},
        {type: 'input', field: 'field2', title: 'field2', value: ''},
        {type: 'datePicker', field: 'date', title: 'date', value: ''},
      ]
    }
  },
  methods: {}
}
</script>

3. 通过setValue方法修改表单数据

<template>
  <div>
    <p>formData: {{ value }}</p>
    <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value">
      <template #type-btns>
        <ACol :push="3" style="margin-bottom: 20px;">
          <AButton @click="changeForm" style="margin-left:20px;">修改表单</AButton>
        </ACol>
      </template>
    </form-create>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      value: {field1: '111', field2: '222', date: '2023-10-23'},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        },
        resetBtn: true
      },
      rule: [
        {type: 'input', field: 'field1', title: 'field1', value: ''},
        {type: 'input', field: 'field2', title: 'field2', value: ''},
        {type: 'datePicker', field: 'date', title: 'date', value: ''},
        {type: 'btns'},

      ]
    }
  },
  methods: {
    changeForm() {
      this.fApi.setValue({field1: '666', field2: '666', date: '2023-09-23'});
    }
  }
}
</script>