Vue和餓了么UI 實現動態表單效果

對於動態增減表單項，Element UI 官方文檔表單那一節已經介紹得很清楚了，我之前沒有看見，繞了很多彎路，這里針對點擊按鈕增刪一排輸入框的問題做一個總結。

效果圖如下

存在一排必填的姓名與手機號，點擊增加后會新增一行，點擊每行后面的刪除圖標則會刪除該行

必填項很簡單，就是普通表單：

<el-form
     ref="form"
    :rules="formRules"
    :inline="true"
    :model="form"
    label-width="80px"
>
    <!-- 固定項目 -->
    <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" palceholder="請輸入姓名">
        </el-input>
    </el-form-item>
    <el-form-item label="手機號" prop="phone">
        <el-input v-model="form.phone" palceholder="請輸入手機號">
        </el-input>
    </el-form-item>
</el-form>
<el-button @click="addItem" type="primary">增加</el-button>

export default {
  name: 'dynamicForm',
  data () {
    return {
      form: {
        name: '',
        phone: ''
      },
      formRules: {
        name: [{required: true, message: '請輸入姓名', trigger: 'blur'}],
        phone: [
          {required: true, message: '請輸入手機號', trigger: 'blur'},
          { pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼' }
        ]
      }
    }
  }
}

動態表單部分：

<!-- 動態增加項目 -->
<!-- 不止一個項目，用div包裹起來 -->
<div v-for="(item, index) in form.dynamicItem" :key="index">
    <el-form-item
        label="姓名"
        :prop="'dynamicItem.' + index + '.name'"
        :rules="{
            required: true, message: '姓名不能為空', trigger: 'blur'
        }"
    >
        <el-input v-model="item.name"></el-input>
    </el-form-item>
    <el-form-item
        label="手機號"
        :prop="'dynamicItem.' + index + '.phone'"
        :rules="[
             {required: true, message: '手機號不能為空', trigger: 'blur'},
             { pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼' }
          ]"
        >
        <el-input v-model="item.phone"></el-input>
    </el-form-item>
    <el-form-item>
        <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
    </el-form-item>
</div>

在data 的 form 里增加 dynamicItem

form: {
        name: '',
        phone: '',
        dynamicItem: []
}

在methods里增加方法

methods: {
    addItem () {
      this.form.dynamicItem.push({
        name: '',
        phone: ''
      })
    },
    deleteItem (item, index) {
      this.form.dynamicItem.splice(index, 1)
    }
}

每次點擊增加按鈕，會在dynamicItem里增加新的項，反映到頁面上就是新增了一排輸入框；而點擊刪除的時候，則通過index找到當前行刪掉。