Vue 动态生成表单 :prop 这个属性到底怎么给值

Question

'\
    <div>\
      <div\
        v-for="(type, tindex) in thisControlData"\
        :key="tindex"\
      >\
        <div class="detailTitle">{{ type.BiTypeName }}</div>\
        <div\
          style="border: 1px solid #999; text-align: center; padding: 15px"\
          class="onlyRead"\
        >\
          <div\
            v-for="(group, gindex) in type.group"\
            :key="gindex"\
          >\
            <div\
              class="detailTitleGruop"\
              v-if="group.GroupByName != \'nullGroupBy\'"\
            >\
              {{ group.GroupByName }}\
            </div>\
            <div\
              v-for="(elCtrlVM, index) in group.elCtrlVM"\
              :key="index"\
            >\
              <el-row\
                :gutter="10"\
                v-if="index % thisNumCol == 0"\
              >\
                <div\
                  v-for="(i, xindex) in thisNumCol"\
                  :key="xindex"\
                >\
                  <el-col\
                    :span="24 / thisNumCol"\
                    v-if="group.elCtrlVM[i - 1 + index] != null"\
                  >\
                    <el-form-item\
                      label-width="100px"\
                      v-if="group.elCtrlVM[i - 1 + index].CtrlTypeEk == \'Txt\'"\
                      :label="group.elCtrlVM[i - 1 + index].Title"\
                      :rules="[{ required: group.elCtrlVM[i - 1 + index].IsNotNull==1, validator: function (rule, value, callback) { validateText(group.elCtrlVM[i - 1 + index].Value,callback) }, trigger:[ \'change\',\'blur\' ]}]"\
                        :prop="group.elCtrlVM[i - 1 + index].Value"\----------------------这边是问题点 这个给到的是值，而不是字段名
                        >\
                      <el-input v-model="group.elCtrlVM[i - 1 + index].Value" v-on:input="Ixxxxx(group.elCtrlVM[i - 1 + index])"\
                      :readonly="group.elCtrlVM[i - 1 + index].IsReadonly==1"\
                      ></el-input >\
                    </el-form-item>\
                    <el-form-item\
                      label-width="100px"\
                      v-else-if="group.elCtrlVM[i - 1 + index].CtrlTypeEk == \'Num\'"\
                      :label="group.elCtrlVM[i - 1 + index].Title"\
                      :rules="[{ required: group.elCtrlVM[i - 1 + index].IsNotNull==1, validator: function (rule, value, callback) { validateNum(group.elCtrlVM[i - 1 + index].Value,callback) }, trigger:[ \'change\',\'blur\' ]}]"\
                      :prop="group.elCtrlVM[i - 1 + index].Value"\
                    >\
                      <el-input-number\
                        style="width: 100%"\
                        v-model="group.elCtrlVM[i - 1 + index].Value"\
                         :readonly="group.elCtrlVM[i - 1 + index].IsReadonly==1"\
                      >\
                      </el-input-number>\
                    </el-form-item>\
                    <el-form-item\
                      label-width="100px"\
                      v-else-if="group.elCtrlVM[i - 1 + index].CtrlTypeEk == \'Date\'"\
                      :label="group.elCtrlVM[i - 1 + index].Title"\
                    >\
                      <el-date-picker\
                        type="date"\
                        style="width: 100%"\
                        v-model="group.elCtrlVM[i - 1 + index].Value"\
                      >\
                      </el-date-picker>\
                    </el-form-item>\
                    <el-form-item\
                      label-width="100px"\
                      v-else-if="group.elCtrlVM[i - 1 + index].CtrlTypeEk == \'DropItem\'"\
                      :label="group.elCtrlVM[i - 1 + index].Title"\
                    >\
                      <el-select\
                        style="width: 100%"\
                        v-model="group.elCtrlVM[i - 1 + index].Value"\
                        placeholder="请选择"\
                        :disabled="false"\
                      >\
                        <el-option\
                          v-for="item in group.elCtrlVM[i - 1 + index].Options"\
                          :key="item.Value"\
                          :label="item.Name"\
                          :value="item.Value"\
                        >\
                        </el-option>\
                      </el-select>\
                    </el-form-item>\
                    <el-form-item\
                      label-width="100px"\
                      v-if="group.elCtrlVM[i - 1 + index].CtrlTypeEk == \'Alert\'"\
                      :label="group.elCtrlVM[i - 1 + index].Title"\
                    >\
                      <el-input v-model="group.elCtrlVM[i - 1 + index].Value"></el-input>\
                    </el-form-item>\
                  </el-col>\
                </div>\
              </el-row>\
            </div>\
          </div>\
        </div>\
      </div>\
    </div>'

Answer 1

直接给就行了。参考如下链接。