银行网站建设中免费商标图片

场景

  uni-forms官方组件地址

  使用uniapp官方提供的组件，某个表单需求，单位性质字段如果是高校，那么工作单位则是高校的下拉选择格式，单位性质如果是其他的类型，工作单位则是手动输入的输入框格式的。

  

问题代码

<uni-forms ref="form" :modelValue="formData" :rules="rules" class="form-box" err-show-type="toast" label-width="120px" border><!-- ...只放了一些主要代码... --><uni-forms-item label="单位性质" name="unitCategory" required><z-picker dict-type="icm_unit_category" v-model="formData.unitCategory"></z-picker></uni-forms-item><uni-forms-itemlabel="工作单位"name="unitName"requiredv-if="formData.unitCategory != 1"><uni-easyinput v-model="formData.unitName" placeholder="请输入" :input-border="false" maxlength="50" /></uni-forms-item><uni-forms-itemlabel="工作单位"name="tenantId"requiredv-if="formData.unitCategory == 1"><z-selectv-model="formData.tenantId"url="/admin-api/system/tenant/list":query-params="{ pageNo: 1, pageSize: 100, unitCategory: 1 }"search-key="name"result-key="list"label-key="name"@curr-item="(item) => (formData.unitName = item.name)"></z-select></uni-forms-item><!-- ...只放了一些主要代码... -->
</uni-forms><view class="flex-item-center btns fixed-bottom-box"><button type="primary" plain class="save-btn" @click="save">暂 存</button><button type="primary" class="submit-btn" @click="submit">提 交</button>
</view>

submit: $debounce.throttle(async function () {await this.$refs.form.validate()// ... 其他提交逻辑代码
})         

  

结果

  点击提交结果提示：提交的字段['tenantId']在数据库中并不存在

  

问题剖析

  出现这个问题是因为v-if导致的，初始的时候条件没有满足，导致相应的dom没有渲染，后续虽然满足了条件，dom渲染了，但是由于ui-forms组件等原因并没有正确获取的重新渲染后的dom中的变量；

  

解决方案

• 方案1：给v-if绑定的元素加key

<uni-forms-itemlabel="工作单位"name="unitName"requiredv-if="formData.unitCategory != 1":key="formData.unitCategory"
><uni-easyinput v-model="formData.unitName" placeholder="请输入" :input-border="false" maxlength="50" />
</uni-forms-item>
<uni-forms-itemlabel="工作单位"name="tenantId"requiredv-if="formData.unitCategory == 1":key="formData.unitCategory"
><z-selectv-model="formData.tenantId"url="/admin-api/system/tenant/list":query-params="{ pageNo: 1, pageSize: 100, unitCategory: 1 }"search-key="name"result-key="list"label-key="name"@curr-item="(item) => (formData.unitName = item.name)"></z-select>
</uni-forms-item>

• 方案2：给v-if的元素再套一层父元素如<template>，并将v-if放到父元素上面

<template v-if="formData.unitCategory != 1"><uni-forms-itemlabel="工作单位"name="unitName"required><uni-easyinput v-model="formData.unitName" placeholder="请输入" :input-border="false" maxlength="50" /></uni-forms-item>
</template>
<template v-if="formData.unitCategory == 1"><uni-forms-itemlabel="工作单位"name="tenantId"required><z-selectv-model="formData.tenantId"url="/admin-api/system/tenant/list":query-params="{ pageNo: 1, pageSize: 100, unitCategory: 1 }"search-key="name"result-key="list"label-key="name"@curr-item="(item) => (formData.unitName = item.name)"></z-select></uni-forms-item>
</template>

完美解决。