Element UI 动态表单

Posted 2022-04-01 长不大的大灰狼

Element UI 动态表单

• • • • 一、基本使用

一、基本使用

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

<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] ElementUI 官网 动态增减表单项
[2] 实现动态表单