当前位置：首页 > news >正文

uniapp使用扩展组件uni-data-select出现的问题汇总

news 2025/7/21 13:24:46

前言

不知道大家有没有学习过我的这门课程那，《uniCloud云开发Vue3版本官方推荐用法》，这么课程已经得到了官方推荐，想要快速上手unicloud的小伙伴们，可以学习一下这么课程哦，不要忘了给一键三连呀。

在录制这门课程的时候，可能在视频中出现的一些问题，没有发现或者没有解决，因此写一篇文章记录一下已知的bug以及扩展知识。

问题一：uni-data-select组件collection连数据库，orderby属性不能排序的问题

<uni-data-select ref="selectRef" collection="xxm-bizhi-classify"field="_id as value, name as text":where="`enable == true`"orderby="sort asc"v-model="selectValue">
></uni-data-select>

如上所示代码，如果想要根据数据库内的sort这个字段进行排序，这样写是起不到作用的，原因是field没有讲排序字段sort过滤出来。

解决办法： 只需要在field过滤的时候，将sort字段过来出来即可，如下所示：

field="_id as value, name as text , sort"

问题二：发布成功后，上传选择的分类值依然存在

这个问题，挺多小伙伴反映了，就是发布成功后，上次选择的下拉框值依然存在，很影响下一次的操作，官方文档也没给提供属性或方法解决，如下所示：

在这里插入图片描述
如果你进入到扩展组件uni-data-select内部的话，你就知道什么原因了，因为发布成功之后，会将你最后选择的值记录到缓存中，再次打开的话，会读取缓存，所以就一直存在了，如下代码是uni-data-select的方法：

// 获取缓存
getCache(name = this.getCurrentCacheKey()) {let cacheData = uni.getStorageSync(this.cacheKey) || {};return cacheData[name];
},
// 设置缓存
setCache(value, name = this.getCurrentCacheKey()) {let cacheData = uni.getStorageSync(this.cacheKey) || {};cacheData[name] = value;uni.setStorageSync(this.cacheKey, cacheData);
}

在这里插入图片描述

解决办法： 只需要在合适的场景下，调用组件的clearVal()方法即可。

//給uni-data-select组件定义ref
const selectValue = ref("");//可以在页面加载完毕后，执行clearVal()方法进行清除
onMounted(()=>{selectRef.value.clearVal();
})//或者在表单提交完成后清除
const submit = ()=>{...自己的业务逻辑；selectRef.value.clearVal(); //清空选择
}