element 表单验证批量添加的 demo

最新推荐文章于 2023-07-14 12:02:00 发布

小墨宝

最新推荐文章于 2023-07-14 12:02:00 发布

阅读量346

点赞数

分类专栏： vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_38935512/article/details/125427877

版权

vue 专栏收录该内容

130 篇文章 1 订阅

订阅专栏

效果

在这里插入图片描述

主要是这个标签<el-form-item :rules="rules.programName" :prop="'programList.' + index + '.programName'" label="方案名称">

需要循环的部分

<el-row v-for="(second,index) in form.programList" :key="index" class="programme">
        <el-row>
          <el-form-item :rules="rules.programName" :prop="'programList.' + index + '.programName'" label="方案名称">
            <el-input v-model.trim="second.programName" :disabled="detail.editState === 0" class="w220" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item :rules="rules.typeId" :prop="'programList.' + index + '.typeId'" label="考核类型">
            <el-select v-model="second.typeId" :disabled="detail.editState === 0" placeholder="请选择" clearable filterable class="w220">
              <el-option v-for="typeItem in curFormOptions.options.typeList" :label="typeItem.typeName" :value="`${typeItem.typeName},${typeItem.id}`" :key="typeItem.typeName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button v-if="detail.editState !== 0&&form.programList.length>1" type="danger" size="mini" class="btn" plain @click="reduce(index)">删除方案</el-button>
        </el-row>

        <el-row v-for="(its,idx) in second.sectionList" :key="idx">
          <el-form-item :rules="rules.kpiMin" :prop="'programList.' + index + '.sectionList.'+ idx+ '.kpiMin'" label="区间设置(%)">
            <el-input v-model.trim="its.kpiMin" :disabled="detail.editState === 0" class="section" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item >
            <span class="line">-</span>
          </el-form-item>
          <el-form-item :rules="rules.kpiMax" :prop="'programList.' + index + '.sectionList.'+ idx+ '.kpiMax'" label="">
            <el-input v-model.trim="its.kpiMax" :disabled="detail.editState === 0" class="section" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item :rules="rules.billingRule" :prop="'programList.' + index + '.sectionList.'+ idx+ '.billingRule'" label="计费规则" >
            <el-select v-model="its.billingRule" :disabled="detail.editState === 0" placeholder="请选择" clearable filterable class="w220" @change="val=>changeBillingRule(val,its)">
              <el-option v-for="ele in formOptions.options.chargingRulesList" :label="ele.typename" :value="ele.typecode" :key="ele.typename" >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="its.billingRule === 0" :rules="rules.kpiScore" :prop="'programList.' + index + '.sectionList.'+ idx+ '.kpiScore'" label="KPI得分">
            <el-input v-model.trim="its.kpiScore" :disabled="detail.editState === 0" clearable class="w120" maxlength="10" placeholder="请输入"></el-input>
          </el-form-item>
          <i v-if="second.sectionList.length>1&&detail.editState !== 0" class="pointer el-icon-remove-outline reduce text-danger" @click="reduceScore(second.sectionList,idx)"></i>
          <i v-if="second.sectionList.length-1===idx&&detail.editState !== 0" class="pointer el-icon-circle-plus-outline  plus text-link" @click="plusScore(second.sectionList)"></i>
        </el-row>
      </el-row>