uni-data-select及uni-data-picker使用云端数据驱动的选择器数据回显问题解决办法

问题描述

uni-data-select及uni-data-picker是uniapp的扩展组件，不但支持本地渲染数据，而且还支持渲染云端数据库的数据，但是云端数据会出现回显的问题，下面就将我再开发中遇到的问题，给大家说一下解决方法。

uni-data-select 下拉框组件

问题复现

<uni-data-select	
	collection="JLJ-merchant-category"
	field="_id as value, name as text"
	@change="onCategoryChange"
	:value="formData.category_id"
/>

const onCategoryChange = (e) => {
	formData.value.category_id = e;
};

如上代码，之前是让uni-data-select组件使用value属性，只负责展示，通过change事件进行赋值，这样就会造成数据不会显的问题。

解决办法

只需要将:value改成v-model就可以了，这样双向绑定也可以之前去除掉change事件了，如下所示代码：

<uni-data-select	
	collection="JLJ-merchant-category"
	field="_id as value, name as text"	
	v-model="formData.category_id"
/>

uni-data-picker 级联选择器组件

问题复现

使用这个组件是做的中国省市区的选择，在数据库中area字段记录了省市区的text和value，如下所示：

{
  "_id":"6898a6a29755e3437a99214f",
  "area": [
    {
      "text": "辽宁省",
      "value": "210000"
    },
    {
      "text": "大连市",
      "value": "210200"
    },
    {
      "text": "沙河口区",
      "value": "210204"
    }
  ]
 }

原有代码是如下所示的，获取的是云端数据库的数据，是无法进行回显的。

<uni-data-picker	
	placeholder="请选择地址"
	popup-title="请选择城市"
	collection="opendb-city-china"
	field="code as value, name as text"
	orderby="value asc"
	:step-searh="true"
	self-field="code"
	parent-field="parent_code"
	@change="onCitychange"
></uni-data-picker>

解决办法

需要给uni-data-picker组件设置v-model，值是area数组最后一个对象的value值，因为官方文档v-model绑定值要求的是类型是String/ Number，下面是示例代码：

<uni-data-picker	
	placeholder="请选择地址"
	popup-title="请选择城市"
	collection="opendb-city-china"
	field="code as value, name as text"
	orderby="value asc"
	:step-searh="true"
	self-field="code"
	parent-field="parent_code"
	@change="onCitychange"
	v-model="areaValue"
></uni-data-picker>

const areaValue = ref(null);
const getDetail = async () => {
	try {
		let { errCode, data } = await merchantCloudObj.detail();
		formData.value = data;
		//获取area数组最后一个value值
		areaValue.value = unref(formData).area[unref(formData).area.length - 1].value;
	} catch (err) {
		console.log(err);
	}
};