原文链接

    vue element UI 添加一行表单 - 图1

    1. <div class="candidatesFirstFormDialog">
    2.   <div>符合全部以下条件，相应的指标数据在小程序端不显示且不会触发报警</div>
    3.   <el-form :model="conditionsRulesForm" ref="addCondition" :rules="conditionsFormRules" style='margin-left:40px;margin-bottom:55px;margin-top:40px;'>
    4.     <div v-for="(item,index) in conditionsRulesForm.iotDataList" :key="index">
    5.       <el-row>
    6.         <el-col :span="4" style="margin-right:10px;">
    7.           <el-form-item class="monitorNumber" label="指标：" :prop="'iotDataList.'+index+'.monitorNumber'" :rules="conditionsFormRules.monitorNumber">
    8.             <el-select style="width:60%" v-model="item.monitorNumber" size="small">
    9.               <el-option v-for="item in ruleContentSelect2" :key="item.value" :value="item.value" :label="item.label"></el-option>
    10.             </el-select>
    11.           </el-form-item>
    12.         </el-col>
    13.         <el-col :span="4" style="margin-right:10px;">
    14.           <el-form-item class="filterConditionType" label="监测值：" :prop="'iotDataList.'+index+'.filterConditionType'" :rules="conditionsFormRules.filterConditionType">
    15.             <el-select style="width:50%" v-model="item.filterConditionType" size="small">
    16.               <el-option v-for="item in monitoringValueList" :key="item.value" :value="item.value" :label="item.label"></el-option>
    17.             </el-select>
    18.           </el-form-item>
    19.         </el-col>
    20.         <el-col :span="2" style="margin-right:10px;">
    21.           <el-form-item class="filterConditionValue" :prop="'iotDataList.'+index+'.filterConditionValue'" :rules="conditionsFormRules.filterConditionValue">
    22.             <el-input size="small" v-model="item.filterConditionValue" maxlength="15" autocomplete="off" style="width:100%"></el-input>
    23.           </el-form-item>
    24.         </el-col>
    25.         <el-col :span="4" style="margin-right:10px;width:17.6%;">
    26.           <el-form-item label="隐藏指标：" class="filteredMonitorNumber" :prop="'iotDataList.'+index+'.filteredMonitorNumber'" :rules="conditionsFormRules.filteredMonitorNumber">
    27.             <el-select style="width:50%" v-model="item.filteredMonitorNumber" size="small">
    28.               <el-option v-for="item in ruleContentSelect2" :key="item.value" :value="item.value" :label="item.label"></el-option>
    29.             </el-select>
    30.           </el-form-item>
    31.         </el-col>
    32.         <el-col :span="5" style="margin-right:10px;width:21.8%;">
    33.           <el-form-item label="条件状态：" :prop="'iotDataList.'+index+'.status'" :rules="conditionsFormRules.status">
    34.             <el-switch class="tablescope" v-model="item.status" :active-value="true" :inactive-value="false" active-color="#fe000c" active-text="开" inactive-text="关" inactive-color="#bdbdbd" style="width:60%;" /></el-form-item>
    35.         </el-col>
    36.         <!-- 删除按钮 -->
    37.         <el-col :span="1">
    38.           <el-tooltip class="item" effect="dark" content="删除" placement="top">
    39.             <el-button @click="delConditions(index)" style='border:none;background:none;padding:0px;margin-top:4px;'> <i class="el-icon-remove-outline" style='font-size:20px;'></i>
    41.             </el-button>
    42.           </el-tooltip>
    43.         </el-col>
    44.       </el-row>
    45.     </div>
    46.     <div>
    47.       <el-tooltip class="item" effect="dark" content="添加条件" placement="top">
    48.         <el-button @click="addConditions" style='cursor:pointer;width:83%;color:#fe000c;border:1px dashed #fe000c;height:40px;padding:0px;margin-top:10px;margin-left:20px;font-size:26px'>+</el-button>
    49.       </el-tooltip>
    50.     </div>
    51.   </el-form>
    52.   <div slot="footer" class="dialog-footer" style="text-align:center;position:absolute;bottom:30px;width:100%;">
    53.     <el-button type="danger" plain @click="handleEditCancel" size="small">取消</el-button>
    54.     <el-button style="margin-top: 12px;" type="danger" @click="handleEditSave('addCondition')" size="small">保存</el-button>
    55.   </div>
    56. </div>
    data(){
  // // 过滤条件表单
  conditionsRulesForm:{
    iotDataList:[
      {
        monitorNumber:'',  // 指标
        filterConditionType:'', //检测值
        filterConditionValue:'',  // 隐藏指标
        lubricationPointNumber:'',   // 润滑点编号
        status:true  // 状态
      }
    ],
  }
}

methods(){
    // 条件设立中添加一行
  addConditions () {
    if(this.conditionsRulesForm.iotDataList.length<=10) {
      this.conditionsRulesForm.iotDataList.push({
        monitorNumber:'',  // 指标
        filterConditionType:'', //检测值类型
        filterConditionValue:'',  // 检测值
        lubricationPointNumber:'',   // 润滑点编号
        filteredMonitorNumber:'',  // 隐藏指标
        status:true  // 状态
      });
    } else {
      this.$message('最多可添加十项条件');
    }
  }
}