Vue3简单动态表单实现

之前做的vue项目都是写死的form或者table。 今天想尝试下动态表单实现，按照后端给的数据来展示。

1. 首先创建整个form表单容器和最终提交的form对象。

<el-form :model="formTest"></el-form>
# js
const formTest = ref({})

2. 定义表单的字段List，用来实现form中所有项目

const formItems = [
  {
    field: "username",
    label: "用户名",
    placeholder: "请输入用户名",
    type: "input"
  },
  {
    field: "password",
    label: "密码",
    placeholder: "请输入密码",
    type: "password"
  },
  {
    field: "company",
    label: "公司",
    placeholder: "请选择公司",
    type: "select",
    options: [
      { label: '公司A', value: 'company1'},
      { label: '公司B', value: 'company2'},
      { label: '公司C', value: 'company3'}
    ]
  }
]

3. 根据设计的form表单结构设计界面匹配数据

 <el-form :model="formTest">
  <template v-for="item in formItems" :key="item.fieldId">
    <template v-if="item.type === 'input' || item.type === 'password'">
      <el-form-item :label="item.label">
        <el-input :type="item.type" v-model="formData[`${item.field}`]" :placeholder="item.placeholder"/>
      </el-form-item>
    </template>
    <template v-else-if="item.type === 'select'">
      <el-select v-model="formData[`${item.field}`]">
        <el-option v-for="option in item.options" :label="option.label" :value="option.value"></el-option>
      </el-select>
    </template>
  </template>
  <el-button @click="clickFun">提交</el-button>
</el-form>

v-model绑定formTest,根据字段信息双向绑定到formTest

提交form表单信息