循环表单 el-form-item 添加验证

最新推荐文章于 2024-07-01 16:58:32 发布

曲小强

最新推荐文章于 2024-07-01 16:58:32 发布

阅读量1k

点赞数

分类专栏： Vue.js 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/quhongqiang/article/details/127092012

版权

Vue.js 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<el-form ref="btn" :model="init" :inline="true" :disabled="disableds">
        <div v-for="(item, index) in init.serviceSet" :key="index">
          <el-form-item label="服务费率" :rules="rules.serviceChargeRatio" :prop="`serviceSet.${index}.serviceChargeRatio`">
            <el-input v-model="item.serviceChargeRatio" :disabled="item.checkedCities.length == 0" style="width: 100px;" size="mini" clearable @input="serverMoney($event, item)" />%
          </el-form-item>
          <el-form-item label="服务费上限" :rules="rules.serviceChargeLimit" :prop="`serviceSet.${index}.serviceChargeLimit`">
            <el-input v-model="item.serviceChargeLimit" :disabled="item.checkedCities.length == 0" style="width: 100px;" size="mini" clearable />元
          </el-form-item>
          <el-form-item label="最低服务费" :rules="rules.serviceChargeMinimum" :prop="`serviceSet.${index}.serviceChargeMinimum`">
            <el-input v-model="item.serviceChargeMinimum" :disabled="item.checkedCities.length == 0" style="width: 100px;" size="mini" clearable />元
          </el-form-item>
          <el-divider content-position="left" />
        </div>
        <!-- <el-button @click="test">测试按钮</el-button> -->
      </el-form>

rules: {
    serviceChargeRatio: [
      { required: true, message: '请输入', trigger: 'blur' },
    ],
    serviceChargeLimit: [
      { required: true, message: '请输入', trigger: 'blur' },
    ],
    serviceChargeMinimum: [
      { required: true, message: '请输入', trigger: 'blur' },
    ],
  },
  test() {
  var flag = false
  this.$refs['btn'].validate((valid) => {
    if (valid) {
      console.log('--------')
      flag = true
    } else {
      console.log('============')
      flag = false
    }
  })
  return flag
},