vue3级联选择器（已被禁用），通过tooltip实现全路径的显示

注释步骤仅是学习，整理思路，可以复制代码用debugger进行逐步了解。

    <template>
    <el-form>
    <el-col :span="12">
              <el-tooltip class="item" effect="dark" :content="insCategoryLabel" placement="top">
                <el-form-item label="分类" prop="instrCategory">
                  <el-cascader
                    v-model="formData.instrCategory"
                    :options="categoryTree"
                    @change="instrCategoryChange"
                    placeholder="请选择"
                    disabled
                  />
                </el-form-item>
              </el-tooltip>
            </el-col>
            </el-form>
            </template>

<script setup lang="ts">
   const categoryTree = ref([]) // 查询分类树结构数据
   const insCategoryLabel = ref('')
   /** 打开弹窗 */
   const open = async (type: string, id?: number) => {
     /**其他逻辑...................*/

  // 调用函数，查找目标节点及其父节点路径
  //在页面打开时就调用函数，去获取insCategoryLabel的值，当停留在设备分类上时进行展示
  //1.调用findNodePath函数，并进行传值，传的值分别为树结构和所需查找的节点值（后端接口回显来的））（看最下面的图）
  const path = findNodePath(categoryTree.value, formData.value.instrCategory)
  if (path) {
  //23.当找到时，接收返回的path,根据返回的path,拼接path数组中每个数组值的node.label，进而进行展示
    insCategoryLabel.value = path.map((node) => node.label).join(' /')
  } else {
    console.log('未找到节点！')
  }
}
//2.接收传来的参数，创建path新数组，执行return traverse(options)命令，开始调用traverse方法。
 const findNodePath = (options, targetValue) => {
  const path = []
  //3.树结构（以下面四张图来描述，下列函数的运行情况）首先开始执行时参数nodes是整个树结构。
  //8.执行traverse函数，接收node.children参数
  //13.接收的参数是id=19的这组数据
  //22.类推循环id=20、21、22、23数据，跟id=19一样（在遍历过程中，一直遍历的是nodes,即id=18这组数据中的children）(当id=18，这组数据中的children遍历完之后，id=18这组数据也被释放，nodes就开始为初始的id=17的数据，进而遍历id=17这组数据的第二个children)
  function traverse(nodes) {
  //4.遍历nodes,中的node是nodes中的每一项（图一中的每一项（0-14））,首先是id=17这组数据
  //9.此时遍历的node是id=18，这组数据
  //14.node是id=19，这组数据
  //18.为null
    for (let node of nodes) {
    //5.把id=17这组数据存入path数组中
    //10.同样是把id=18这组数据存入path数组中
    //15.同样也把id=19,这组数据存入path数组中
      path.push(node)
      //6.假设后端传来的targetValue=20010，而node.value是=0的，所以不相等跳过继续往下执行
      //11.显然id=18这组数据的node.value=0不相等，跳过往下执行
      //16.显然id=19这组数据的node.value=90101不相等，跳过往下执行
      if (node.value === targetValue) {
        return [...path]
        
      }
      //7.查看id=17，这组数据是有有children,显然是有（如图2），执行traverse函数且传入node.children参数
      //12.id=18这组数据也是有children的（如图3），继续执行traverse函数，传入参数为id=18这组数据的children
      //17.显然（如图3，id=19没有children）node.children为空
      if (node.children) {
        const result = traverse(node.children)
        //20.为null,跳过
        if (result) {
          return result
        }
      }
      //21.释放path。把id=19这组数据释放
      path.pop()
    }
    //19.返回null
    return null
  }
  // 开始遍历
  return traverse(options)
}
const instrCategoryChange = (value: []) => {
  formData.value.instrCategory = value[value.length - 1]
}
   </script>

树结构的图片展示

最后结果展示