值回显问题
我们都知道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)