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