巧妙驾驭 el-form，实现动态渲染表单控件

2023-11-29 19:26:01

el-form 介绍

el-form 是一款强大的 Vue 组件，它提供了一系列表单控件，包括输入框、单选框、复选框、日期选择器等。我们可以通过配置 el-form 的属性来控制表单的行为，比如表单的布局、是否启用表单校验等。

2. 动态渲染表单控件

为了让表单控件能够根据 JSON 数据动态渲染，我们需要使用 el-form 的 v-for 指令和 :key 属性。v-for 指令用于遍历 JSON 数据中的每一项，:key 属性则用于给每一项分配一个唯一的键值。

<el-form :model="formData">
  <el-form-item v-for="item in formSchema" :key="item.id">
    <el-input v-model="formData[item.id]" :placeholder="item.placeholder"></el-input>
  </el-form-item>
</el-form>

在上面的代码中，formSchema 是一个包含 JSON 数据的数组，每一项代表一个表单控件。v-for 指令会遍历 formSchema 数组中的每一项，并为每一项创建一个 el-form-item 组件。el-form-item 组件是表单控件的容器，它可以包含一个或多个表单控件。

在 el-form-item 组件内部，我们使用 el-input 组件来创建输入框。v-model 指令用于将输入框的 value 属性绑定到 formData 对象中的相应属性。placeholder 属性则用于设置输入框的提示文字。

3. 实现添加、修改功能

为了实现添加、修改功能，我们需要在表单中添加一个按钮，当点击按钮时，会触发相应的事件。在事件处理函数中，我们可以根据表单中的数据来添加或修改记录。

<el-button type="primary" @click="submitForm">提交</el-button>

在上面的代码中，submitForm 是一个方法，当点击按钮时，会触发这个方法。在 submitForm 方法中，我们可以根据表单中的数据来添加或修改记录。

submitForm() {
  // 如果是添加操作，则将表单数据添加到数据库
  if (this.isAdd) {
    this.$axios.post('/api/add', this.formData).then(() => {
      // 添加成功后，刷新页面
      window.location.reload()
    })
  }
  // 如果是修改操作，则将表单数据更新到数据库
  else {
    this.$axios.put('/api/update', this.formData).then(() => {
      // 修改成功后，刷新页面
      window.location.reload()
    })
  }
}