【vant 级联选择 tab页签错乱修复记录】

问题描述

使用vant中原生级联选择器cascader进行多级菜单选择时，发现tab页签在多次点击后显示错乱，经测试发现在ios中是好的，在安卓手机中必现。

复现步骤：在多级菜单中，先选择一级菜单中含有子节点的数据，然后切换到一级菜单中不包含子节点的数据，将出现如下图的错乱。

原因分析：

vant官方并未给出具体的解决方案。考虑是缓存未清除或者判断错误导致，从官方搞了份源码重写了个简版，把异步请求的部分给去掉了，发现仍然存在同样的问题。通过打日志，发现最终的tabs数据是准确的，但是页面显示有问题，应该是dom没有刷新

解决方案：

在更新ta’b’s的方法中，先将tabs赋值为空数组，之后在nextTick中再次赋准确的值，问题解决。
和官方的主要差别：

1. 先赋值为空数组
   tabs.value = []
2. 在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);
    }