修改表单数据

本文介绍了不同方法如何修改表单数据，包括使用 v-model、formData、setValue 和 coverValue 方法。

通过 v-model 修改表单数据

使用 v-model 可以方便地绑定表单字段和数据，实现双向绑定。通过 v-model，用户的输入会自动更新到数据模型中，数据模型的变化也会实时反映到表单中。

formData: { "field1": "111", "field2": "222", "date": "2023-10-23" }

field1

field2

date

复制成功!

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

通过 formData 设置表单默认值

formData 配置允许你在表单初始化时设置默认值。通过将数据对象传递给 formData，可以将默认值应用到表单中的字段，确保表单在加载时具有预设的值。

formData: { "field1": "666", "field2": "666", "date": "2023-09-23" }

field1

field2

date

复制成功!

<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>

通过 setValue 方法修改表单数据

setValue 方法提供了灵活的方式来修改表单数据。你可以使用 setValue 方法设置整个表单的值，或者单独设置某个字段的值。此方法适用于需要在表单渲染后动态更新数据的场景。

formData: { "field1": "111", "field2": "222", "date": "2023-10-23" }

field1

field2

date

复制成功!

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

通过 coverValue 方法覆盖表单数据

coverValue 方法允许你用新的数据完全覆盖表单的当前值。与 setValue 不同的是，coverValue 方法会替换掉表单中的所有数据，而不仅仅是部分字段。适用于需要完全重置表单数据的场景。

formData: { "field1": "111", "field2": "222", "date": "2023-10-23" }

field1

field2

date

复制成功!

<template>
  <div>
    <p>formData: {{ value }}</p>
    <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value">
      <template #type-btns>
        <elCol :push="3" style="margin-bottom: 20px;">
          <elButton @click="changeForm" style="margin-left:20px;">修改表单</elButton>
        </elCol>
      </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.coverValue({field1: '其他字段配清空'});
    }
  }
}
</script>