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

2021-09-09  本文已影响0人  jinya2437

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();
      }
    },

上一篇下一篇

猜你喜欢

热点阅读