zoukankan      html  css  js  c++  java
  • element 表单的input循环生成,并可单个input失去焦点单个验证并保存; (多个表单实例)

    <div class="box_item">
      <el-form ref="aList" :model="form" :rules="formRules" label-width="210px">
        <el-form-item class="itemSty"
          v-for="(items, index) in form.aList"
          :label="items.name"
          :key="items.no"
          :prop="'aList.' + index + '.moneyStr'"
          :rules="formRules.moneyStr">
            <el-input type="text" :maxlength="7" placeholder="0.00-9999" v-model="items.moneyStr">
              <template slot="append">元</template>
            </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="box_item">
      <el-form ref="bList" :model="form" :rules="formRules" label-width="210px">
        <el-form-item class="itemSty"
          v-for="(items, index) in form.bList"
          :label="items.name"
          :key="items.no"
          :prop="'bList.' + index + '.moneyStr'"
          :rules="formRules.moneyStr">
            <el-input type="text" :maxlength="7" placeholder="0.00-9999" v-model="items.moneyStr">
              <template slot="append">元</template>
            </el-input>
        </el-form-item>
      </el-form>
    </div>

    export default {
      data() {
        let _this = this
        let tool = this.tool
        let rule_rentMoney = function(rule,value,callback){
          if(value.length && !tool.validate.money(value) ){
            callback(new Error('请输入整数或小数(小数最多两位)'))
          }else if(value > 9999 ){
            callback(new Error('金额不能大于 9999 元'))
          }else{
            _this.edit(rule.field,value) // 验证通过调用保存方法
            callback()
          }
        }
        return{
          form:{
            aList:[],
            bList:[]
          },
          formRules:{
            moneyStr:[
              { validator: rule_rentMoney, trigger: 'blur' }
            ],
          }

        }
    },
    methods: {
      //清除验证的提示
      clearFn(){
        let that = this
        this.arrValidateKey.map( key =>{
          if(that.$refs[key]){
            that.$refs[key].resetFields();
          }
        })
      },
    }
    }

  • 相关阅读:
    015.Delphi插件之QPlugins,FMX插件窗口
    014.Delphi插件之QPlugins,MDI窗口
    013.Delphi插件之QPlugins,模块化代码示例
    012.Delphi插件之QPlugins,多实例内嵌窗口服务
    011.Delphi插件之QPlugins,延时加载服务
    010.Delphi插件之QPlugins,遍历服务接口
    009.Delphi插件之QPlugins,服务的热插拔
    008.Delphi插件之QPlugins,服务的两种调用方法
    007.Delphi插件之QPlugins,插件的卸载和重新加载
    006.Delphi插件之QPlugins,多服务演示
  • 原文地址:https://www.cnblogs.com/zhaoxiaobei/p/9289294.html
Copyright © 2011-2022 走看看