vue+elementui動態表單

<template>
  <el-form ref="ruleformRef" :model="ruleform">
    <el-form-item
      v-for="(li, i) in ruleform.array"
      :key="i"
      :label="`姓名${i}`"
      :prop="`array.${i}.item`"
      :rules="rules.required"
    >
      <el-input v-model="li.item"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

/**
 * vue3動態表單注意點：
 *  1、ref和:model名稱不能一樣
 *  2、:prop寫法固定【數組.索引.數組元素屬性】
 *  3、數組與v-for名稱一致，數組元素屬性與v-model名稱一致
 */
@Options({
  components: {},
})
export default class Home extends Vue {
  private ruleform = {
    array: [{ item: "" }, { item: "" }, { item: "" }],
  };

  private rules = {
    required: [{ required: true, message: "必填項", trigger: "blur" }],
  };

  private submitForm() {
    (this.$refs.ruleformRef as HTMLFormElement).validate((valid: boolean) => {
      if (valid) {
        alert("submit!");
      } else {
        return false;
      }
    });
  }

  private resetForm() {
    (this.$refs.ruleformRef as HTMLFormElement).resetFields();
  }
}
</script>