Element UI 动态表单_elementui动态表单

一、基本使用

首先存在一排固定必填的姓名与手机号，点击增加后会新增一行，点击每行后面的删除图标则会删除该行。

<el-form
     ref="form"
    :model="form"
    label-width="80px"
>
    <!-- 固定项目 -->
    <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"/>
    </el-form-item>
    
    <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone"/>
    </el-form-item>
    
<!-- 动态增加表单项 -->
<!-- 不止一个项目，用div包裹起来 -->
<div v-for="(item, index) in form.dynamicItem" :key="index">
    <el-form-item
        label="姓名"
        :prop="'dynamicItem.' + index + '.name'"
    >
        <el-input v-model="item.name"></el-input>
    </el-form-item>
    
    <el-form-item
        label="手机号"
        :prop="'dynamicItem.' + index + '.phone'">
        <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>
</el-form>

<el-button @click="addItem" type="primary">增加</el-button>



export default {
  data () {
    return {
      form: {
        name: '',
        phone: '',
        dynamicItem: []
      } 
    }
  },
  methods: {
    addItem () {
      this.form.dynamicItem.push({
        name: '',
        phone: ''
      })
    },
    deleteItem (item, index) {
      this.form.dynamicItem.splice(index, 1)
    }
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

参考文章
[1] ElementUI 官网 动态增减表单项
[2] 实现动态表单