值回显问题

我们都知道el-cascader是根据value/v-model的值去找到用户选择的路径进行显示

我们选中相关数据进行提交之后，返回给后端一个数组，这个数组就是相关选择的路径参数，可以是id什么的，由前后端共同确认这个参数的选项;

问题出现了

后端查数据根据这个路径去找，找到这个选项就返回这条数据给你，他并不会把这个路径返回过来，这就产生了一个bug，我前端这边显示，再次点编辑这数据;

其实是金融业的保险业，input框也有这样显示，但是级联这边就没有显示选中状态；

核心就是出现在el-cascader里的value/v-model里面

我们知道后端只是返回了这个数据的id而不是路径，我们给他们就是一条完整的路径，他们给我们就是简化版的一个id（如果你们公司的后端良心还在，商量商量就给回来了），所以只要把这条路径找出来，那么就会显示完整了；

好了现在，我们假设不需要卑微的去求后端给我们填字段，那么我们怎么找这条数据呢？

首先我们需要拿到这个完整的树，都到树这个阶段了，我们现在又知道了最小的子节点，那么这条路径我们能不能找到了？

对此，我使用了广搜，够简单

下面算法奉上

/**
 * 广度优先
 * @param arr 
 * @param id 
 * @param childrenKey
 */
export function findParentNode(arr: any, id: number): number[] | null {
  const queue: any[] = [{
    node: arr,
    path: []
  }]

  while (queue.length > 0) {
    const { node, path } = queue.shift()
    for (let i = 0; i < node.length; i++) {
      const item = node[i];
      const newPath = [...path, item.id];
      if (item.id == id) {
        return newPath;
      }

      if (item.child) {
        queue.push({
          node: item.child,
          path: newPath
        })
      }
    }

  }

  return null;
}


//引入函数
//xxx.vue
import {findParentNode} from "~/until/const"

xxx=findParentNode(树,id)

到此，题目的问题我们就解决了