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

咸虾米_2024-11-30 21:57

前言

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

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

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

javascript 复制代码

<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的方法：

javascript 复制代码

// 获取缓存
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()方法即可。

javascript 复制代码

//給uni-data-select组件定义ref
const selectValue = ref("");

//可以在页面加载完毕后，执行clearVal()方法进行清除
onMounted(()=>{
	selectRef.value.clearVal();
})

//或者在表单提交完成后清除
const submit = ()=>{
	...自己的业务逻辑；
	selectRef.value.clearVal(); //清空选择
}