美文网首页
2021-09-09 element el-input自定义验证

2021-09-09 element el-input自定义验证

作者: jinya2437 | 来源:发表于2021-09-09 09:32 被阅读0次

    forEach循环input输入项目,限制不能为空

    image.png
    // 数据结构
      data() {
        return {
            collapseActiveKey:['0'],
            listCompetitor: [
              {
                Competitor: undefined,
                CompetitorPrice: undefined,
                CompetitorAllocation: undefined,
              }
            ] //竞争对手
          }
        }
    
    // 页面布局
    <el-collapse v-model="collapseActiveKey">
      <el-collapse-item
        v-for="(item, index) in formData.listCompetitor"
        :key="index.toString()"
        :name="index.toString()">
        <template slot="title">
          <div class="detailTitle">
            <div>
              <el-tooltip
                v-if="parseInt(index + 1) == formData.listCompetitor.length" content="添加">
                <i class="el-icon-circle-plus-outline" @click="addCompetitor(index)" />
              </el-tooltip>
              <el-tooltip v-if="formData.listCompetitor.length > 1" content="删除">
                <i class="el-icon-delete" @click="deleteCompetitor(index)" />
              </el-tooltip>
            </div>
          </div>
        </template>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item class="is-required" label="竞争对手" :prop="'Competitor'+index" :rules="[{validator: (a, b, c) =>validateDetailForm(a, b, c, index, 'Competitor'),trigger: 'blur',}]">
              <el-input v-model="item.Competitor" placeholder="请输入竞争对手" clearable style="width: 100%;">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="is-required" label="对手价格" :prop="'CompetitorPrice'+index" :rules="[{validator: (a, b, c) =>validateDetailForm(a, b, c, index, 'CompetitorPrice'),trigger: 'blur',}]">
              <el-input-number controls-position="right" :min="0.01" :step="0.01" v-model="item.CompetitorPrice" placeholder="请输入对手价格" clearable style="width: 100%;">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="is-required" label="对手份额" :prop="'CompetitorAllocation'+index" :rules="[{validator: (a, b, c) =>validateDetailForm(a, b, c, index, 'CompetitorAllocation'),trigger: 'blur',}]">
              <el-input-number controls-position="right" :min="0.01" :step="0.01" v-model="item.CompetitorAllocation" placeholder="请输入对手份额" clearable style="width: 100%;">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    
        // 校验函数竞争对手的校验
        validateDetailForm(rule, value, callback, index, name) {
          if (!this.formData.listCompetitor[index][name]) {
            callback(new Error('必填项不能为空!'));
          } else {
            callback();
          }
        },
    
    

    相关文章

      网友评论

          本文标题:2021-09-09 element el-input自定义验证

          本文链接:https://www.haomeiwen.com/subject/nukiwltx.html