其他分享
首页 > 其他分享> > elmentui 表单验证问题

elmentui 表单验证问题

作者:互联网

<template>
  <div>
    <el-form ref="rateData" :model="rateData" :rules="DataRules" class="demo-ruleForm">
      <div v-for="(item, index) in rateData.ratesList" :key="index">
        <div>功率段{{ index + 1 }}:</div>
        <el-form-item :prop="'ratesList.' + index + '.minPower'" :rules="[
                          { maxPower: item.maxPower, validator: validateRate, trigger: 'blur' }
                        ]">
          <span>起始功率:</span>
          <el-input v-model="item.minPower" />
          <span>瓦</span>
        </el-form-item>
        <el-form-item :prop="'ratesList.' + index + '.maxPower'" :rules="[
                          { minPower: item.minPower, validator: validateRate, trigger: 'blur' }
                        ]">
          <span>截止功率:</span>
          <el-input v-model="item.maxPower" :disabled="rateData.ratesList.length -1 == index ? false : true " />
          <span>瓦</span>
        </el-form-item>
        <el-form-item :prop="'ratesList.' + index + '.money'" :rules="DataRules.money">
          <span>执行标准:</span>
          <el-input v-model="item.money" />
          <span>元/小时</span>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  methods: {
    validateRate(rule, value, callback) {
      var start = rule.fullField.indexOf('.')
      var end = rule.fullField.lastIndexOf('.')
      var index = rule.fullField.slice(start + 1, end)
      if (value === '') {
        callback(new Error(' '))
      } else if (this.rateData.ratesList[index].maxPower <= this.rateData.ratesList[index].minPower) {
        callback(new Error('最小功率不能大于最大功率'))
      } else if (this.rateData.ratesList[index].maxPower > this.custompower) {
        this.$message.error('截止功率不能大于最大额定功率')
        callback(new Error(' '))
      } else {
        callback()
      }
    },
  }
}
</script>

标签:index,功率,验证,rule,表单,callback,fullField,var,elmentui
来源: https://www.cnblogs.com/web-simon/p/16463220.html