vue+element ui动态增加表单项并支持删除_vue动态新增表单

需求：点击加号动态添加表单项站点和通道，当站点和通道有多个时允许删除，只有一个时不能删除，删除按钮隐藏

先来看看效果吧

默认初始效果：

点击加号动态新增表单项后：

 上代码：

<template>
 <div class="select-site-ipc" v-for="(item,index) in alarmRuleForm.alarmSourceArray" 
  :key=index>
       <div class="site-box">
         <el-form-item class="site-item" :prop="'alarmSourceArray.' + index + '.siteId'" :rules="[{ required:true,message:$translate('errorCode.33042'), trigger: 'change' }]">
            <el-select
              ref='sceneSelect'
                class="site-scene"
                :label="$translate('site')"
                required
                v-model="item.siteId"
                filterable
                :fitDropdownWidth="true"
                style="width:368px"
                @change="changeSite($event,index)"
                @visible-change='visibleChange'
              >
                <el-option
                  v-for="item in siteOps"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :title="item.label"
                  :disabled="item.disabled"
                >
                  <span>{{ item.label }}</span>
                </el-option>
              </el-select>
              <i v-if='alarmRuleForm.alarmSourceArray.length>1' class="el-icon-close del-alarm-source" @click="deleteItem(index)"></i>
        </el-form-item>
       </div>
        <el-form-item :prop="'alarmSourceArray.' + index + '.ipc'" :rules="[{ required:true,message:$translate('errorCode.33017'), trigger: 'change' }]">
             <el-select
               v-model="item.ipc"
               required
               multiple
               collapse-tags
               style="width:368px;"
               placeholder="请选择">
               <el-option
                v-for="item in item.chlList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
               </el-option>
             </el-select>
         </el-form-item>
       </div>
       <!-- 可添加站点和通道 -->
        <el-row>
          <el-col><div class="add-site" @click="AddSite"><SvgImg viewBox="0 0 14 14" width="14" height="14"><icon-add /></SvgImg> {{$translate('site')}}</div></el-col>
        </el-row>
      </div>
</template>
 
<script>
 export default{ 
  data(){
  return {
    alarmRuleForm:{
      alarmSourceArray: [
        { siteId: '', ipc: [],chlList: [] }
       ],
       }
     }
    },
   methods:{
      // 点击新增站点
    AddSite () {
      let index = null
      if (this.operationType === 1) {
        this.alarmRuleForm.alarmSourceArray.push({
          siteId: '',
          ipc: [],
          chlList: []
        })
        index = this.alarmRuleForm.alarmSourceArray.length - 1
      } else {
        index = this.alarmRuleForm.alarmSourceArray.length
      }
    },
    deleteItem (index) {
      this.alarmRuleForm.alarmSourceArray.splice(index,1)
    },
   }
 }
   
</script>

其中，核心代码是表单项prop的写法，首先，先定义一个数组用来存放可动态添加的部分（alarmRuleForm.alarmSourceArray），外层循环该数组，其中每一个表单项的prop就表示成‘数组名.index.变量名’即"'alarmSourceArray.'+index+'.siteId'"，这里不能用item来替换数组名alarmSourceArray