循环 表单

重点 表单循环校验

:prop="lodTitle === '????'? (prop =`tabsList[${indexfild}].arr.${scope.$index}.excelField`) : null"

       <el-form
            label-position="top"
            class="upload-file-form"
            ref="importForm"
            label-width="80px"
            :model="formData"
            :rules="rules"
          >
            <div class="upload-content">
              <!-- <div class="upload-content-information"></div> 暂时注释 -->
              <div class="upload-content-table">
                <!-- <el-form-item label=""> -->
                <el-tabs
                  v-model="activeName"
                  @tab-click="handleClick"
                  :stretch="true"
                >
                  <el-tab-pane
                    v-for="(item, indexfild) in formData.tabsList"
                    :key="item.type"
                    :label="item.name"
                    :name="item.name"
                    :lazy="true"
                  >
                    <el-table
                      ref="tableRef"
                      :data="item.arr"
                      :height="tableHeight"
                      border
                      style="width: 100%"
                      :row-class-name="tableRowClassName"
                      :row-style="{ height: '40px' }"
                      row-key="fieldId"
                      :default-expand-all="false"
                      :tree-props="{
                        children: 'children',
                        hasChildren: 'hasChildren',
                      }"
                    >
                      <template slot="empty">
                        <span style="color: #969799">{{
                          assoTableName || ""
                        }}</span>
                      </template>
                      <!-- <el-table-column type="selection" align="center" width="55">
                      </el-table-column> -->
                      <el-table-column
                        prop="listField"
                        align="center"
                        label="字段列"
                        width="175"
                        show-overflow-tooltip
                      >
                      </el-table-column>

                      <el-table-column
                        prop="valueField"
                        align="center"
                        label="内容列"
                        width="200px"
                        show-overflow-tooltip
                      ></el-table-column>

                      <el-table-column
                        prop="excelField"
                        align="center"
                        label="修改列"
                        width="330"
                        resizable
                      >
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="
                              lodTitle === '字段配置'
                                ? (prop = `tabsList[${indexfild}].arr.${scope.$index}.excelField`)
                                : null
                            "
                            style="display: inline-block; height: 50px"
                            :rules="
                              lodTitle === '?' ? rules.excelField : []
                            "
                            label=""
                          >
                            <el-select
                              v-model="scope.row.excelField"
                              clearable
                              size="small"
                              filterable
                              style="margin: 3px 0"
                              :disabled="lodTitle === '?'"
                            >
                              <el-option
                                v-for="(item, index) in headersKey"
                                :label="item.label"
                                :value="item.value"
                                :key="`${item.label}${index}`"
                              ></el-option>
                            </el-select>
                          </el-form-item>

                          <template v-if="lodTitle !== '?'">
                            <el-button
                              v-if="scope.row.listField"
                              style="margin-left: 6px"
                              icon="el-icon-plus"
                              circle
                              @click.stop="
                                allList(scope.row, 'add', scope.$index)
                              "
                            ></el-button>
                            <el-button
                              v-if="!scope.row.listField"
                              style="margin-left: 6px"
                              icon="el-icon-minus"
                              type="danger"
                              circle
                              @click.stop="
                                allList(scope.row, 'remove', scope.$index)
                              "
                            ></el-button>
                          </template>
                        </template>
                      </el-table-column>
                      <!-- 特殊列 -->
                      <el-table-column
                        v-if="lodTitle === '?'"
                        prop="dvField"
                        align="center"
                        label="修改列"
                        width="260"
                        resizable
                      >
                        <template slot-scope="scope">
                          <el-date-picker
                            v-if="scope.row.dataType === 'dateTime'"
                            clearable
                            v-model="scope.row.dvField"
                            type="date"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                          ></el-date-picker>
                     
                      
                          <!-- selsct -->
                          <el-select
                            v-else-if="scope.row.dataType === 'select'"
                            v-model="scope.row.dvField"
                            placeholder="请选择"
                            clearable
                            filterable
                            allow-create
                            @click.native="
                              (event) => changeClick(event, scope.row, item)
                            "
                            size="small"
                          >
                            <el-option
                              v-for="item in dataSelect"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <!--  -->
                          <el-input
                            v-if="scope.row.dataType === 'input'"
                            placeholder="请输入内容"
                            v-model.trim="scope.row.dvField"
                            clearable
                          >
                          </el-input>
                          <el-input
                            v-if="scope.row.dataType === 'number'"
                            placeholder="请输入内容"
                            v-model.trim="scope.row.dvField"
                            type="number"
                            clearable
                          >
                          </el-input>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
                <!-- </el-form-item> -->
              </div>
            </div>
          </el-form>

重点数据结构  表单校验循环到每一个属上 实时校验

   formData: {
        // 标签页
        tabsList: [
          { type: 1, name: "?", arr: [] },
          { type: 2, name: "?", arr: [] },
          { type: 3, name: "?", arr: [] },
          { type: 4, name: "?", arr: [] },
          { type: 5, name: "?", arr: [] },
          { type: 6, name: "?", arr: [] },
          { type: 7, name: "?", arr: [] },
          { type: 8, name: "?", arr: [] },
          { type: 9, name: "?", arr: [] },
          { type: 10, name: "?", arr: [] },
          { type: 11, name: "?", arr: [] },
        ],
      },