vue-elementui-el-table-el-form：动态列表表单增删及表单验证

 

<template>
  <el-form :model="dataForm2" :rules="dataFormRules2" ref="dataFormRef2" label-width="0">
               <el-table
                :data="dataForm2.tableData"
                ref="multipleTable"
                :max-height="tableListHeight"
                border
                empty-text="暂无"
                style="width: 100%">
                <el-table-column fixed="left"
                  label="序号"
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column fixed="right" prop="value1" label="贸易商-提货点-计划采购量(kg)" min-width="500" header-align="left" :show-overflow-tooltip='true'>
                  <template #header>
                    <div>
                      <div class="cell_tableHeader">
                        <div>贸易商</div>
                        <div>提货点</div>
                        <div>计划采购量(kg)</div>
                      </div>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div class="procurementPlan_table_row_name">
                      <div class="procurementPlan_table_row" >
                        <div class="procurementPlan_table_row_cell" v-for="(rowListItem,rowListIndex) in scope.row.rowList" :key="rowListIndex">
                          <el-form-item label-width="0"
                          :prop="'tableData.'+scope.$index+'.rowList.'+rowListIndex+'.value1'"
                          :rules="dataFormRules2.value1" >
                            <el-select v-model="rowListItem.value1"
                            @change="handleInputBlur"
                            placeholder="贸易商" clearable>
                              <el-option
                              v-for="(item,index) in commonDictArr2" :key="index"
                              :label="item.supplierName"
                              :value="item.id"
                              />
                            </el-select>
                          </el-form-item>
                          <div class="input_border"></div>
                          <el-form-item label-width="0"
                          :prop="'tableData.'+scope.$index+'.rowList.'+rowListIndex+'.value2'"
                          :rules="dataFormRules2.value2" >
                            <el-select v-model="rowListItem.value2"
                            @change="handleInputBlur"
                            placeholder="提货点" clearable>
                              <el-option
                              v-for="(item,index) in commonDictArr3" :key="index"
                              :label="item.factoryName"
                              :value="item.id"
                              />
                            </el-select>
                          </el-form-item>
                          <div class="input_border"></div>
                          <el-form-item label-width="0"
                          :prop="'tableData.'+scope.$index+'.rowList.'+rowListIndex+'.value3'"
                          :rules="dataFormRules2.value3" >
                            <el-input v-model="rowListItem.value3"
                            v-inputFilterDirect:numberDot2
                            placeholder="计划采购量"
                            @blur="handleInputBlur"></el-input>
                            <span>
                              <i v-if="scope.row.rowList.length > 1" @click="dataForm2_deleteBtn(scope.row,scope.$index,rowListIndex)" class="el-icon-remove procurementPlan_table_row_icon"></i>
                            </span>
                          </el-form-item>
                        </div>
                      </div>
                      <el-button class="procurementPlan_table_row_addBtn" icon=""  @click="dataForm2_addBtn(scope.row,scope.$index)" type="text"><i
                        class="el-icon-circle-plus">
                        </i>新增
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
</template>
<script>
  export default {
    data() {
      // 贸易商
      var validateValue1 = (rule, value, callback) => {
        var that = this;
        var idx = 0;
        var idx2 = 0;
        // tableData.1.rowList.0.value1
        if (rule && rule.field) {
          idx = rule.field.split(".")[1]
          idx2 = rule.field.split(".")[3]
        }
        if (rule.required) {
          var currentItem = ''
          var currentItemEl = ''
          var arr = []
          that.dataForm2.tableData &&  that.dataForm2.tableData.map((el,index) => {
            el.rowList && el.rowList.map((el2,index2) => {
              if (idx == index && idx2 == index2) {
                currentItem = el2
                currentItemEl = el
              }
            })
          })
          that.dataForm2.tableData &&  that.dataForm2.tableData.map((el,index) => {
            if (currentItemEl && (currentItemEl.id == el.id)) {
               el.rowList && el.rowList.map((el2,index2) => {
                if (el2.value1 && el2.value2) {
                  if ((idx != index || idx2 != index2)) {
                    arr.push(el2.value1 + '/' + el2.value2)
                  }
                }
              })
            }
          })
          if (currentItem) {
            if ((currentItem.value2 && !value) || (currentItem.value3 && !value)) {
              if (that.isCheckClickSubmitBtn) {
                  that.$messageBlock('error', '信息未填写完整，请检查后提交');
                  that.isCheckClickSubmitBtn = false;
              }
              callback(new Error('此项为必填项'));
            } else {
                console.log(arr)
                var currentValue = ''
                if (currentItem.value1 && currentItem.value2) {
                  currentValue = currentItem.value1 + '/' + currentItem.value2
                }
                console.log(currentValue)
                if (currentValue && arr.length> 0 && findSelectIsRepeatToArr(arr,currentValue)) {
                  that.$messageBlock('error', '同一单下的贸易商-提货点组合请勿重复');
                  callback(new Error('数组中有重复元素'));
                } else {
                  callback();
                }
            }
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      // 提货点
      var validateValue2 = (rule, value, callback) => {
        var that = this;
        var idx = 0;
        var idx2 = 0;
        // tableData.1.rowList.0.value1
        if (rule && rule.field) {
          idx = rule.field.split(".")[1]
          idx2 = rule.field.split(".")[3]
        }
        if (rule.required) {
          var currentItem = ''
          var currentItemEl = ''
          var arr = []
          console.log(that.dataForm2.tableData)
          that.dataForm2.tableData &&  that.dataForm2.tableData.map((el,index) => {
            el.rowList && el.rowList.map((el2,index2) => {
              if (idx == index && idx2 == index2) {
                currentItem = el2
                currentItemEl = el
              }
            })
          })
          that.dataForm2.tableData &&  that.dataForm2.tableData.map((el,index) => {
            if (currentItemEl && (currentItemEl.id == el.id)) {
               el.rowList && el.rowList.map((el2,index2) => {
                if (el2.value1 && el2.value2) {
                  if ((idx != index || idx2 != index2)) {
                    arr.push(el2.value1 + '/' + el2.value2)
                  }
                }
              })
            }
          })
          console.log(currentItem)
          if (currentItem) {
            if ((currentItem.value1 && !value) || (currentItem.value3 && !value)) {
              if (that.isCheckClickSubmitBtn) {
                  that.$messageBlock('error', '信息未填写完整，请检查后提交');
                  that.isCheckClickSubmitBtn = false;
              }
              callback(new Error('此项为必填项'));
            } else {
                console.log(arr)
                var currentValue = ''
                if (currentItem.value1 && currentItem.value2) {
                  currentValue = currentItem.value1 + '/' + currentItem.value2
                }
                console.log(currentValue)
                if (currentValue && arr.length> 0 && findSelectIsRepeatToArr(arr,currentValue)) {
                  that.$messageBlock('error', '同一单下的贸易商-提货点组合请勿重复');
                  callback(new Error('数组中有重复元素'));
                } else {
                  callback();
                }
            }
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      // 计划采购量
      var validateValue3 = (rule, value, callback) => {
        var that = this;
        var idx = 0;
        var idx2 = 0;
        // tableData.1.rowList.0.value1
        if (rule && rule.field) {
          idx = rule.field.split(".")[1]
          idx2 = rule.field.split(".")[3]
        }
        if (rule.required) {
          var currentItem = ''
          that.dataForm2.tableData &&  that.dataForm2.tableData.map((el,index) => {
            el.rowList && el.rowList.map((el2,index2) => {
              if (idx == index && idx2 == index2) {
                currentItem = el2
              }
            })
          })
          if (currentItem) {
            if ((currentItem.value1 && !value) || (currentItem.value2 && !value)) {
              if (that.isCheckClickSubmitBtn) {
                  that.$messageBlock('error', '信息未填写完整，请检查后提交');
                  that.isCheckClickSubmitBtn = false;
              }
              callback(new Error('此项为必填项'));
            } else if (value && value == 0) {
              if (that.isCheckClickSubmitBtn) {
                that.$messageBlock('error', '计划采购量不可输入0');
                that.isCheckClickSubmitBtn = false;
              }
              callback(new Error('计划采购量不可输入0'));
            } else {
              callback();
            }
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      return {
        tableListHeight:'500',
        //列表数据
        dataForm2:{
          tableData:[]
        },
        dataFormRules2:{
          value1:[{required: true, trigger: "change", validator: validateValue1}],
          value2:[{required: true, trigger: "change", validator: validateValue2}],
          value3:[{required: true, trigger: "blur", validator: validateValue3}],
        },

      }
    },
    props: {},
    methods: {
      //输入框失焦
      handleInputBlur() {
      },
      // 单元格每项 添加按钮
      dataForm2_addBtn(row,rowIdx) {
        console.log(rowIdx)
        var that = this;
        that.dataForm2.tableData &&  that.dataForm2.tableData.map((el,index) => {
          if (rowIdx == index) { //先找到对应的行
            el.rowList.push({value1:'',value2:'',value3:''})
          }
        })
        that.dataForm2 = {
          tableData: that.dataForm2.tableData
        }
        that.getTableHeight();
      },
      // 单元格每项 删除按钮
      dataForm2_deleteBtn(row,rowIdx,rowListIndex) {
        var that = this;
        that.dataForm2.tableData &&  that.dataForm2.tableData.map((el,index) => {
          if (rowIdx == index) { //先找到对应的行
            el.rowList.splice(rowListIndex,1)
          }
        })
        that.dataForm2 = {
          tableData: that.dataForm2.tableData
        }
      },

    }
  }
</script>