vant级联选择器选择后下一级数据通过接口获取到,在页面上不显示下级数据
时间: 2023-07-16 14:15:06 浏览: 171
如果你使用的是vant级联选择器组件,那么可以采用以下步骤来解决你的问题:
1. 确保你的下级数据已经通过接口获取到了,并且保存在了对应的变量中。
2. 在级联选择器组件的 "change" 事件回调函数中,根据当前选中的值,更新下一级数据的值。
3. 如果下一级数据更新成功,那么需要重新渲染级联选择器组件,以展示新的下一级数据。你可以通过调用级联选择器组件的 "updateActiveIndex" 方法来重新渲染组件。
下面是一个示例代码片段,供你参考:
```
<van-cascader
:options="options"
@change="handleChange"
/>
data() {
return {
options: [], // 省市区数据
cities: [], // 当前省份下的城市列表
districts: [], // 当前城市下的地区列表
}
},
methods: {
// 级联选择器的change事件回调函数
handleChange(value) {
// 更新城市列表
const selectedProvince = value[0];
this.cities = this.options.find(p => p.value === selectedProvince).children;
// 更新地区列表
const selectedCity = value[1];
this.districts = this.cities.find(c => c.value === selectedCity).children;
// 重新渲染级联选择器
this.$refs.cascader.updateActiveIndex();
}
}
```
在上面的代码中,我们通过 "options" 变量保存了省市区数据,通过 "cities" 和 "districts" 变量保存了当前选中省份和城市下的城市列表和地区列表。在 "handleChange" 方法中,我们根据当前选中的值,更新了城市列表和地区列表,并调用了级联选择器组件的 "updateActiveIndex" 方法来重新渲染组件。
阅读全文