标签：vue return vailInputRuleFloat default element validator ui span export

一、场景一  简单的表单验证示例

其实问题关键就在于如何给el-form-item动态绑定prop

:prop="'ratioTableData.'+ scope.$index + '.字段名'"

<el-form :model="tableForm" ref="tableForm">
          <div class="table1-style">
            <list-condition-template ref="table1" :tableData="tableForm.ratioTableData"
                                     :indexColumn="false" :isShowPage="false">
              <!-- 表格区域 -->
              <template slot="columns">
                <el-table-column label="渠道id" prop="id" align="center" v-if="disColumns">
                </el-table-column>
                <el-table-column label="渠道名称" prop="channelName" align="center">
                </el-table-column>
                <el-table-column label="分发比例（%）" align="center">
                  <template scope="scope">
                    <el-form-item :prop="'ratioTableData.'+ scope.$index + '.ratio'"
                                  :rules="formRules.ratio" style="width:100%;">
                      <el-input class="custom-input-style" v-model="scope.row.ratio"
                                placeholder="请输入渠道分发占比，0为不分发库存">
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
              </template>
            </list-condition-template>
          </div>
        </el-form>

<script>
import { vailInputRuleFloat } from '@/utils/validator'
export default {
  name: "allocationSetDialog",
  data() {
    return {
      tableForm: {
        ratioTableData: [],
      },
      formRules: {
        'ratio': [{ validator: vailInputRuleFloat }]
      }
    }
  },
  methods: {}
}
</script>
//utils/validator.js

/** 限制只能输入大于等于0的数字(可以输入2位小数) 不必填*/
export function vailInputRuleFloat(rule, value, callback) {
    const reg = /((^([1-9]{1}\d*)(\.{0,1}\d{1,2}$|$))|(^(0{1})(?=(\.{1}\d{1,2}$|$))))/
    if (value && !reg.test(value)) {
        callback(new Error('请输入大于等于0的整数或最多两位小数的数字'))
    } else {
        callback()
    }
}

二、场景二  展开行中使用表单验证----数组里面包含数组

<el-form size="mini" :model="form" ref="form">
        <list-condition-template ref="table" :dataKey="'spuNum'" :tableData="form.dataSource"
                                 :total="total" :isClickRowExpand="true" :isShowPage="false">
          <template slot="columns">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-row>
                  <el-col :span="3" class="cur-c">
                    <span class="required-style">可分配渠道：</span>
                  </el-col>
                  <el-col :span="21">
                    <channel-allot-module :dataSource="form.dataSource" colCount="2"
                                          :index="scope.$index">
                    </channel-allot-module>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column label="商品主编码" prop="spuNum" width="180px" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="商品名称" prop="spuName" min-width="220px" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="规格型号" prop="spec" width="140px">
            </el-table-column>
            <el-table-column label="可分配数量" prop="stock" width="150px" show-overflow-tooltip>
            </el-table-column>
          </template>
        </list-condition-template>
      </el-form>

  data() {
    return {
      form: {
        dataSource: [
             {
             stockChannelDistributes:[
                   {
                                   channel: 1,
                                   channelName: “3253252”,
                                   stock: null,
                   }，
                  {
                                   channel: 1,
                                   channelName: “3253252”,
                                   stock: null,
                   }
              ]
             }
        ]
      },
    }
  },    

// views/commodityStocks/module/channelAllotModule.vue

<template>
  <el-row class="channel-allot-s">
    <el-col :span="getCol" v-for="(v2,key) in dataSource[index].stockChannelDistributes" :key="key">
      <el-form-item :label="v2.channelName"
                    :prop="'dataSource.'+ index +'.stockChannelDistributes.'+ key +'.stock'"
                    label-width="140px" :rules="formRules.stock">
        <el-input v-model="v2.stock" placeholder="请输入分配数量" clearable>
        </el-input>
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script>
import { vailInputRuleInt } from '@/utils/validator'
/**
 * 渠道分配
 */
export default {
  name: "channelAllotModule",
  props: {
    /**
      * 数据源
      */
    dataSource: {
      type: Array,
      default: function () {
        return []
      }
    },
    /**
     * 列数目
     */
    colCount: {
      type: [Number, String],
      default: 1
    },
    /**
     * 下标
     */
    index: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      formRules: {
        'stock': [{ validator: vailInputRuleInt, trigger: 'change' }]
      },
    }
  },
  computed: {
    getCol: function () {
      let _span = 24;
      if (this.colCount) {
        _span = 24 / this.colCount;
      }
      return _span;
    }
  }
}
</script>

<style lang="scss">
.channel-allot-s {
  .el-form-item {
    margin-bottom: 0 !important;
    height: 50px;
  }
}
</style>

标签：vue,return,vailInputRuleFloat,default,element,validator,ui,span,export
来源： https://www.cnblogs.com/1156063074hp/p/16198264.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。