element-ui+vue 解决table里包含表单验证

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

其实问题关键就在于如何给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