版本信息
HbuilderX 5.15
uni-ui 中 uni-data-picker版本 2.0.2
vue3
问题代码片段
<uni-data-picker
v-model="form.areaId"
:localdata="areaOptions"
ellipsis
v-slot="{ data, error }"
:map="{ text: 'name', value: 'id' }"
popup-title="所属社区"
@nodeclick="onnodeclick"
@popupclosed="onpopupclosed"
:readonly="formConfig.actionType != 'edit'"
>
<view class="buildType arrow">
<view v-if="error" class="error">
<text>{{ error }}</text>
</view>
<view v-else-if="data.length" class="uni-input">
<text> {{ data[data.length - 1].text }}</text>
</view>
<view class="uni-input" v-else>
<text>请选择</text>
</view>
</view>
</uni-data-picker>
uni-data-picker中涉及readonly的回显处理片段
_processReadonly(dataList, value) {
var isTree = dataList.findIndex(item => {
return item.children;
});
if (isTree > -1) {
let inputValue;
if (Array.isArray(value)) {
inputValue = value[value.length - 1];
if (typeof inputValue === 'object' && inputValue.value) {
inputValue = inputValue.value;
}
} else {
inputValue = value;
}
this.inputSelected = this._findNodePath(inputValue, this.localdata);
return;
}
if (!this.hasValue) {
this.inputSelected = [];
return;
}
let result = [];
if (Array.isArray(value)) {
for (let i = 0; i < value.length; i++) {
var val = value[i];
var item = dataList.find(v => {
return v.value == val;
});
if (item) {
result.push(item);
}
}
} else {
let item = dataList.find(v => {
return v.value == value;
});
if (item) {
result.push(item);
}
}
if (result.length) {
this.inputSelected = result;
}
},
问题描述:在传入的localData和readonly属性均依赖异步接口获取时,存在数据竞态更新导致的回显问题
- 排查发现uni-data-picker代码实现中,在dataList.find中使用的是硬编码的value,并未根据传入的map处理,此外匹配失败时未正确清空this.inputSelected的值,使得组件偶尔回显上一次匹配的值
版本信息
HbuilderX 5.15
uni-ui 中 uni-data-picker版本 2.0.2
vue3
问题代码片段
uni-data-picker中涉及readonly的回显处理片段
问题描述:在传入的localData和readonly属性均依赖异步接口获取时,存在数据竞态更新导致的回显问题