vue element-UI form 嵌套table 表单验证记录

效果图

代码

因为分不同模块，但校验需集合至一起，所以单独的搞到一起，在el-form标签上直接绑定即可

:model="tbodyFormData"

vue  data中定义数据

tbodyFormData: {
        tableListInfo: [],
        tableListNotGrade: [],
        standbyData: []
      }

以下是主要嵌套渲染代码

重点在 prop属性的命名，有几层嵌套就写多少层级；

:prop="'tableListInfo.' + index + '.gradeList.'+ ind + '.userName'"

 <template v-for="(list, index) in tbodyFormData.tableListInfo">
                    <tr :key="list.grade + index" class="colspan">
                      <td colspan="6" class="col-td">{{ list.grade }}</td>
                      <td class="col-operation"><el-button type="text" size="small" @click="addLivecode(index)">添加活码</el-button></td>
                    </tr>
                    <template v-if="list.gradeList && list.gradeList.length">
                      <tr v-for="(item, ind) in list.gradeList" :key="list.gradeId + ind" class="list-content">
                        <td>
                          <el-form-item
                            style="margin-bottom:0;"
                            :prop="'tableListInfo.' + index + '.gradeList.'+ ind + '.userName'"
                            :rules="[{ required: true, message: '所属人不能为空', trigger: 'change'}]"
                          >
                            <el-select v-model="item.userName" remote filterable placeholder="请输入所属人" :remote-method="remoteMethod" style="width: 100%" @change="($event) => attrpeoChange($event, 'grade', index, ind)">
                              <el-option v-for="(it, i) in allSchoolData" :key="'user' + i" :label="it.name + '(' + it.login_name + ')'" :value="it" />
                            </el-select>
                          </el-form-item>
                        </td>
                        <td>
                          <el-form-item
                            style="margin-bottom:0;"
                            :prop="'tableListInfo.' + index + '.gradeList.'+ ind + '.peopleTotal'"
                            :rules="[{ required: true, message: '次数上限不能为空', trigger: 'change'}, { type: 'number', min: 0, max: 9999, message: '人次上限必须为数字值,且需大于0小于9999'}]"
                          >
                            <el-input v-model.number="item.peopleTotal" placeholder="请输入次数上限" />
                          </el-form-item>
                        </td>
                      </tr>
                    </template>
                  </template>

以上就这些，做一个记录，以便下次查看

来源：oschina

链接：https://my.oschina.net/lpcysz/blog/4305444

标签

IND

Grade

Amp

Vue.js

element