给数组表单校验时候要注意 ,使用一层对象包裹一下,而不能直接用数组
ruleForm:{
levelList:[]
},

div class="allocation">
    <el-row class="allocation " :gutter="10">
      <el-col :span="12" >
        <div class="container">
          <div class="common_title fl">
            <div class="line"></div>
            <div class="name">积分管理</div>
          </div>
          <el-table
          :data="scoreList"
          v-loading="loading"
          element-loading-text="拼命加载中"
          stripe>
          <el-table-column prop="score" label="分数" width=""></el-table-column>
          <el-table-column prop="memberCount" label="人数分布" width=""></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="12" >
        <div class="container">
          <div class="common_title fl">
            <div class="line"></div>
            <div class="name">积分划分</div>
          </div>
          <el-button type="primary" class=" fr" size="small" @click="submitAward" :loading="subLoading"> 提交</el-button>
          <el-form  ref="ruleForm"  :model="ruleForm">`
            <el-table   :data="ruleForm.levelList">
              <el-table-column width="220px" prop="awardName" label="档次名称"></el-table-column>
              <el-table-column prop="lowScore" label="积分下限">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'levelList.' + scope.$index + '.lowScore'"
                    :rules="rules.lowScore">
                    <el-input type="number" :max="scope.row.highScore"
                      class="light-blue-theme" :autofocus="true" @focus="getIndex(scope.$index)"
                      clearable v-model="scope.row.lowScore"
                      placeholder="积分下限"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="highScore" label="积分上限">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'levelList.' + scope.$index + '.highScore'"
                    :rules="rules.lowScore">
                    <el-input min="lowScore" type="number" focus="getIndex(scope.$index)"
                      class="light-blue-theme" :min="scope.row.lowScore"
                      clearable v-model="scope.row.highScore"
                      placeholder="积分上限"/>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>


<script>
'@/components/api/index'
    export default {
        name: "",

      data(){
        var validatePass = (rule, value, callback) => {
        **【注】**不能使用focus的方式获取焦点,因为点击提交时候,由于是单个index,所以只要有不符合条件的 会把即使符合条件的也给提示(不符合条件);
        改进方法如下; 通过这种方式获取索引
         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.ruleForm.levelList[index].lowScore >this.ruleForm.levelList[index].highScore){
            callback(new Error('积分下限不能大于积分上限的值'));

          }else{
            callback();
          }
        };
       
        return {
          scoreList:[],
          index:'',
          ruleForm:{
            levelList:[]
          },

          subLoading:false,
          loading:false,
          rules:{
            lowScore:[
              { validator: validatePass, trigger: 'blur'}
            ]
          }
        }
      },
      mounted(){

      },
      methods:{
        getIndex(index){
          this.index = index;
          console.log('index',index)
        },
       
      },
    }
</script>

另附一个正则的校验 类似金钱格式的 (100,234,13)有逗号校验的
moneyGroupRules: {
moneyGroupNum: [{required: true, message: '不能为空 ', trigger: ‘blur’},{ pattern:/(((-?[1-9]{1}[0-9]{0,2})(\d+|(,{1}\d{3})+)(.\d{0,2}))|((-?[1-9]{1}[0-9]{0,}))|(([0]{1}))|((-?[1-9]{1}[0-9]{0,})((.\d{0,2})))|((-?([0]{1}))((.\d{0,2})))|((-?[1-9]{1}[0-9]{0,2})(\d+|(,{1}\d{3})+)))KaTeX parse error: Expected 'EOF', got '}' at position 35: …trigger: 'blur'}̲] }, …/ ,message: ‘格式不对’,trigger: ‘blur’}]
},
flowInfo:{

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐