遍历生成form表单后el-input无法输入的情况

在使用Element Plus的form的表单时，对于多个重复表单项，从代码阅读性和简精程度看，使用遍历会比枚举更好。

在为表单绑定值的时候，今天踩到了一个坑。

本文使用的vue3 setup语法+typescript

以下枚举表单内容的情况，如果表单项一多，往往会导致代码冗余。

  <!-- vue部分 -->
 <el-form
        :model="FormData"
        label-width="120px"
        ref="FormRef" 
      >
        <el-form-item label="序号" prop="key">
          <el-input v-model="FormData.key" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="FormData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
         <el-input v-model="FormData.age" placeholder="请输入" />
        </el-form-item>
  </el-form>

  <!-- ts部分 -->
<script setup lang="ts">
//如果reactive报错则加import {reactive} from 'vue'
    const FormData=reactive({
    key:'',
    name:'',
    age:null
})
</script>

代码运行，表单长这样，这是一个很简单的表单：

然后我尝试用遍历的方法去输出表单时：

//ts部分

//首先是表单本身，和form直接绑定的
const FormData = reactive<any>({
    age:null,
    name:'',
    time:'',
})

//获取当前时间
const nowDate = new Date()
nowDate.setMonth(new Date().getMonth())

//然后是遍历表单所需要的数据
interface FormType {
    label:string, //每个表单项前的提示文本
    prop:string, //属性，后续用来绑定值
    placeholder?:string, //问号表示这个属性可有可无
    type:string //表单项类型，除了input框，可能还有其他的类型
}

然后接下来是写要进行遍历的内容。

上面的部分没有问题，但是写内容数组的时候，切忌不能使用如下写法：

//进行遍历的内容，即表单项
const FormInfo:FormType[]=[
    {
        label:'姓名',
        prop:FormData.name,
        placeholder:'请输入',
        type:'input'
    }
]

//vue部分
<el-form-item v-for="item in FormInfo" :label="item.label">
          <el-input
            v-if="item.config === 'input'"
            v-model="item.prop"
            :placeholder="item.palceholder"
          />
 </el-form-item>

此时虽然表单可以正常显示，但是很快可以发现，input输入框无法输入，无论打什么，就是输入不了

虽然从某种意义上来说表格的v-model是绑定了FormData，但是代码它是不认识的，它必须是FormData.xxx或FormData[xxx]的形式。

以下为正确写法：

const FormInfo:FormType[]=[
    {
        label:'姓名',
        prop:'name',
        placeholder:'请输入',
        type:'input'
    },
    {
        label:'年龄',
        prop:'age',
        placeholder:'请输入',
        type:'input'
    },
    {
        label:'时间',
        prop:'time',
        placeholder:'请输入日期',
        type:'date'
    },
]


//vue部分
<el-form :model="FormData" label-width="120px" ref="apiFormRef">
        <el-form-item v-for="item in FormInfo" :label="item.label">
          <el-input
            v-if="item.config === 'input'"
            v-model="apiFormData[item.prop]"
            :placeholder="item.palceholder"
          />
 <!-- 让日期选择器自动选定今日 -->
          <el-date-picker
            v-if="item.config === 'date'"
            v-model="apiFormData[item.prop]"
            type="date"
            :placeholder="item.palceholder"
            :default-value="nowDate"
          />
        </el-form-item>
</el-form>

效果如下：

这样因为遍历绑定错误导致的input不能输入的问题就解决了。