Skip to content

uni-data-picker在readonly和map属性同时配置时,数据异步加载时的bug #1063

Description

@17770505014

版本信息

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的值,使得组件偶尔回显上一次匹配的值

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions