1.表单渲染问题:

image.png

2.解决方案:

image.png

3.代码展示

html

        <!--商品参数-->
        <el-collapse :value="collapseVal">
          <el-collapse-item
            v-for="(paramsgroup, paramsIndex) in  goodsParams"
            v-show="paramsgroup"
            :title="'参数组' + (paramsIndex + 1) + '-  ' + paramsgroup.groupName"
            :key="paramsgroup.groupId"
            :name="paramsgroup.groupId">
            <el-form-item
              v-for="(paramsList, index) in baseInfoForm.paramsList"
              v-show="paramsList && paramsList.groupId && paramsgroup.groupId === paramsList.groupId"
              :key="index"
              :label="`${paramsList.paramName}：`"
              :prop="'paramsList.' + index + '.paramValue'"
              :rules="paramsList.required === 1 ? {required: true, message: `${paramsList.paramName}不能为空`, trigger: `${paramsList.paramType === 1 ? 'blur' : 'change'}` } : {}">
              <el-input
                v-if="paramsList.paramType === 1"
                v-model="paramsList.paramValue" >
              </el-input>
              <el-select
                v-if="paramsList.paramType === 2"
                v-model="paramsList.paramValue"
                @change="handleParamsSelectChange"
                placeholder="请选择">
                <el-option
                  v-for="(option) in paramsList.optionList"
                  :key="option"
                  :label="option"
                  :value="option">
                </el-option>
              </el-select>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>

js

      /** 参数下拉框选择改变 手动强制刷新render */
      handleParamsSelectChange(val) {
        this.$forceUpdate()
      },
      /** 查询商品参数 ( type 2 编辑有默认值; 1 编辑时没有默认值,通过分类选择获取categoryId */
      GET_GoodsParams(categoryId, type) {
        if (type === 2) {
          API_LXApi.getEditGoodsParams(categoryId, this.activeGoodsId).then((response) => {
            this.loading = false
            this.goodsParams = response
            this.collapseVal = this.goodsParams.map(key => {
              if (key.groupId) {
                return key.groupId
              }
            })
            this.baseInfoForm.paramsList = []
            if (!response || response.length <= 0) {
              return
            }
            this.goodsParams.forEach(key => {
              if (key && key.params) {
                key.params.forEach(elem => {
                  this.$nextTick(() => {
                    this.baseInfoForm.paramsList.push(elem)
                  })
                })
              }
            })
          })
        } else if (type === 1) {
          API_LXApi.getGoodsParams(categoryId).then((response) => {
            this.loading = false
            this.goodsParams = response
            this.collapseVal = this.goodsParams.map(key => {
              if (key.groupId) {
                return key.groupId
              }
            })
            this.baseInfoForm.paramsList = []
            if (!response || response.length <= 0) {
              return
            }
            this.goodsParams.forEach(key => {
              if (key && key.params) {
                key.params.forEach(elem => {
                  this.$nextTick(() => {
                    this.baseInfoForm.paramsList.push(elem)
                  })
                })
              }
            })
          })
        }
      }