uni-app uni-data-picker 初始化设置readonly为true时的回显问题

uni-app uni-data-picker 初始化设置readonly为true时的回显问题

产品分类：

uniapp/H5

项目信息 描述
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 2009
HBuilderX类型 正式
HBuilderX版本号 3.99
浏览器平台 Chrome
浏览器版本 118.0.5993.89
项目创建方式 HBuilderX

示例代码：

<template>  
<view class="container">  
<uni-card  
is-full  
is-shadow="false"
>
    <text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
</uni-card>
<button @click="pickerOnly = !pickerOnly">readonly修改</button>
<uni-section
    title="本地数据"
    type="line"
>
    <view class="uni-px-5 uni-pb-5">
        <uni-data-picker
            placeholder="请选择班级"
            popup-title="请选择"  
readonly="pickerOnly"
localdata="classDataTree"
            v-model="classValue"
            @change="onchange"
            @nodeclick="onnodeclick"
            @popupopened="onpopupopened"
            @popupclosed="onpopupclosed"
        ></uni-data-picker>
    </view>
</uni-section>
<uni-section
    title="自定义插槽"
    type="line"
>
    <view class="uni-px-5 uni-pb-5">
        <uni-data-picker
            v-slot:default="{ data, error, options }"
            title="请选择"  
localdata="classDataTree"
            v-model="classValue"
        >
            <view class="input-border">
                <view
                    v-if="error"
                    class="error"
                >
                    <text>{{ error }}</text>
                </view>
                <view
                    v-else-if="data.length"
                    class="input-selected"
                >
                    <view
                        v-for="(item, index) in data"  
key="index"
class="selected-item" 
                    >
                        <text>{{ item.text }}</text>
                    </view>
                </view>
                <view v-else><text>请选择</text></view>
            </view>
        </uni-data-picker>
    </view>
</uni-section>
<view class="title">
<text>Cloud 数据 (树形)</text>
</view>
<uni-data-picker placeholder="请选择地址" popup-title="请选择所在地区" :preload="true" :step-searh="true" self-field="code"
parent-field="parent_code" collection="opendb-city-china" orderby="value asc"
field="code as value, name as text, eq(type, 2) as isleaf" v-model="address" @nodeclick="onnodeclick"
@change="onchange" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
</uni-data-picker>
<view class="title">
<text>uni-data-pickerview</text>
</view>
<uni-data-pickerview class="data-pickerview" :preload="true" :step-searh="true" self-field="code"
parent-field="parent_code" collection="opendb-city-china" orderby="value asc" field="code as value, name as text">
</uni-data-pickerview>
</view>
</template>

操作步骤：

初始化readonly设置为true时，后续操作将readonly修改为false时，回显会有问题，初始化readonly为false则不会出现这种情况

预期结果：

希望舒适化readonly初始化readonly值为true时，修改为false时回显正常展示

实际结果：

实际结果readonly初始值必须为false才可正常回显选中内容

bug描述：

uniapp 插件 -> 扩展组件 -> uni-data-picker 级联选择器bug 舒适化的readonly值为false时，v-model设置的回显值可以正常显示回显的选中项，为true时，picker内容区域不会显示，只有顶部tab区域会展示选中的名称


更多关于uni-app uni-data-picker 初始化设置readonly为true时的回显问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni-data-picker 初始化设置readonly为true时的回显问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 uni-data-picker 组件时，如果你将 readonly 属性设置为 true，这会导致用户无法手动选择数据，但你可能仍然希望组件能够显示已经选择的数据（即回显）。

回显问题的原因

当 readonly 设置为 true 时，uni-data-picker 组件会禁用用户交互，但仍然需要正确的数据绑定来显示已选择的值。如果数据没有正确绑定或初始化，可能会导致回显失败。

解决方法

  1. 确保数据正确绑定：

    • 确保 v-model 绑定的数据是正确的，并且与 uni-data-picker 的 value 属性匹配。
    • 如果 uni-data-picker 的数据源是动态加载的，确保在数据加载完成后，再设置 v-model 的值。

  2. 初始化数据：

    • 在 onLoad 或 onReady 生命周期钩子中，初始化 v-model 绑定的数据。
    • 如果数据是从后端获取的，确保在数据返回后，再设置 v-model 的值。

  3. 使用 defaultValue：

    • 如果 v-model 的值在初始化时无法立即获取，可以尝试使用 defaultValue 属性来设置默认值。

示例代码

<template>
  <view>
    <uni-data-picker
      v-model="selectedValue"
      :localdata="dataList"
      :readonly="true"
      @change="onChange"
    ></uni-data-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '', // 初始化选中的值
      dataList: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    };
  },
  onLoad() {
    // 模拟从后端获取数据
    setTimeout(() => {
      this.selectedValue = '2'; // 设置选中的值
    }, 1000);
  },
  methods: {
    onChange(e) {
      console.log('选中的值:', e.detail.value);
    }
  }
};
</script>
回到顶部