关于element-ui的级联选择器,最后一个选项没有选中的问题

值回显问题

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

image.png

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

问题出现了

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

image.png
其实是金融业的保险业,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)

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值