问题描述
使用vant中原生级联选择器cascader进行多级菜单选择时,发现tab页签在多次点击后显示错乱,经测试发现在ios中是好的,在安卓手机中必现。
复现步骤:在多级菜单中,先选择一级菜单中含有子节点的数据,然后切换到一级菜单中不包含子节点的数据,将出现如下图的错乱。
原因分析:
vant官方并未给出具体的解决方案。考虑是缓存未清除或者判断错误导致,从官方搞了份源码重写了个简版,把异步请求的部分给去掉了,发现仍然存在同样的问题。通过打日志,发现最终的tabs数据是准确的,但是页面显示有问题,应该是dom没有刷新
解决方案:
在更新ta’b’s的方法中,先将tabs赋值为空数组,之后在nextTick中再次赋准确的值,问题解决。
和官方的主要差别:
- 先赋值为空数组
tabs.value = [] - 在nextTick中重新赋值
tabs.value = tabArr
更新tabs的方法如下
const updateTabs = () => {
if (modelValue.value !== undefined) {
let tabArr = tabs.value
const selectedOptions = getSelectedOptionsByValue(selectOptions.value, modelValue.value)
console.log('selectedOptions', selectedOptions)
if (selectedOptions) {
let optionsCursor = selectOptions.value
// tabs.value = selectedOptions.map((option) => {
tabArr = selectedOptions.map((option) => {
const tab = {
options: optionsCursor,
selected: option
}
const next = optionsCursor.find((item) => item['value'] === option['value'])
if (next) {
optionsCursor = next['children']
}
return tab
})
if (optionsCursor) {
tabArr.push({
options: optionsCursor,
selected: null
})
}
tabs.value = []
nextTick(() => {
tabs.value = tabArr
activeTab.value = tabs.value.length - 1
})
return
}
}
tabs.value = [
{
options: selectOptions.value,
selected: null
}
]
// console.log("tabs", tabs);
}