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

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

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

?

1	: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>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<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()     } }

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

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<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>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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>