移动端localdata属性赋值后不能回显问题,可以通过组件的@popupopened方法触发show()方法重新打开组件解决。
<template>
<view class="create-container">
<uni-forms ref="baseForm" :modelValue="formModal" label-width="130px">
<uni-forms-item
:required="item.required"
:rules="[{ required: true, errorMessage: `${item.label}不能为空!` }]"
:name="item.field"
:label="item.label"
v-for="(item, index) in createBasicFromItem"
:key="index"
>
<uni-data-picker
:key="index"
ref="myPicker"
:readonly="item?.disabled && item?.disabled(formModal)"
v-model="formModal[item.field]"
:map="item?.map"
@change="handelChange(item)"
:localdata="optionsData[item.field] || []"
@popupopened="initData(item, index)"
:border="false"
placeholder=""
:popup-title="`请选择${item.label}`"
>
</uni-data-picker>
</uni-forms-item>
</uni-forms>
</view>
</template>
<script setup lang="ts">
import { createBasicFromItem } from "../scheduling.data";
import { ref} from "vue";
const myPicker = ref();
const optionsData = ref({});
const formModal = ref({});
const initData = async (record, index) => {
if (optionsData.value[record.field]?.length) return; //防止重新打开弹窗
if (record?.api && typeof record.api === "function") {
const result = await record.api(formModal.value);
optionsData.value[record.field] = result;
myPicker.value[index].show(); //重新渲染数据
}
};
</script>