vue2.0+Element 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找到当前行删掉。

巴特西

vue2.0+Element UI 实现动态表单（点击按钮增删一排输入框）

最新文章

热门文章