element-ui动态级联选择器回显问题详解(二十多行代码搞定)

 更新时间:2023年03月01日 11:26:05   作者:雾恋  
大家在使用element-ui的时候肯定会遇到这样一个问题,就是在你使用级联选择器的回显问题,下面这篇文章主要给大家介绍了关于element-ui动态级联选择器回显问题的相关资料,需要的朋友可以参考下

场景描述

后台返回类目数组,其中有一级类目;二级类目,三级类目;这种情况下如何回显数据

效果图如下:

先给大家展示一些数据结构,后面会给大家一一讲解;尤其是回显那部分

数据结构如下:

  • id:自己的id
  • level:等级
  • pid:父级id,0位第一级
  • name:名字
[
    {
    	id:1, level:0,pid:0,name:'测试1'            
    },
    {
    	id:2, level:0,pid:0,name:'测试2'            
    },
    {
    	id:11, level:1,pid:1,name:'测试1-1'            
    },
    {
    	id:12, level:2,pid:11,name:'测试1-1-1'            
    }
]

先贴上html部分

<el-cascader :props="categoryProps" 
            v-model="cascaderData"></el-cascader>

然后再贴上data数据中的部分

这儿需要注意几个点:

label、value需要改为你数据结构一致的字段;

lazyLoad函数中的node有许多参数,如果目前的不能满足你的需求;你可以查看里面的一些参数是否有你需要的数值;

现在data中的lazyLoad函数主要是一些默认值;

      cascaderData: '12',
      categoryProps: {
        emitPath: false,
        label:'name', // 字段必须统一
        value:'id', // 字段必须统一
        lazy: true,
        lazyLoad (node, resolve) {
          const { level,value } = node;
          console.log(value);
          let nodes = [];
          if (level == 0) { // 第一级
            nodes = catalogueList.filter(v=>{return v.level == 0});
          }else { // 后面两级
            nodes = catalogueList.filter(v=>{return v.pid == value});
          };

          resolve(nodes.map(v=>({
            id: v.id,
            name: v.name,
            leaf: level >= 2
          })));
        }
      }, // 级联选择器显示数据

回显的方法:

将以下方法赋值给lazyLoad函数即可实现回显了;

逻辑:

  1. cascaderData:是选择的参数最后一级id
  2. value:我们在选择是(鼠标点击选择的)会触发并返回id,如果没有选择点击,则返回undefined(我们就在这儿进行判断是回显还是手动触发)
  3. 先说回显:threeFind:我们根据有的最后一级id(cascaderData),去查找改数据并查询到他父级(twoFind);然后根据他父级查找到(第三级)的所有数据(threeData)
  4. 然后根据二级数据(twoFind)去查找一级(oneFind),然后根据一级(oneFind)查找到二级的所有数据;一级不用查(level==0)全是
  5. 这个时候开始将对应(二级,三级)的数据放到children下面;children是默认的值;会自动去查找
  6. 在放置第三级的数据的时候需要注意一个值:leaf,为true时就是结束;也必须写这个;否则选择器不会显示,但是展开的时候是显示状态
  7. 现在回显也完成了;但是我们从二级或者一级选择分类的时候,会出现一级或者二级数据跑到二级或者三级目录下等清楚;这个时候就需要将选中的数据查找到
  8. 然后将其子集的数据查找出来;并判断如果是第三级就leaf:true;即可完成
  9. 赶紧去试试吧!
    setLazyLoad(node, resolve) {
      const { level,value } = node;
      const cascaderData = this.cascaderData;
      // 第一级数据
      let nodes = [];

      nodes = catalogueList.filter(v=>{return v.level == 0});
      // 选中的第三级某位数据
      const threeFind = catalogueList.find(v=>{return v.id == cascaderData});
      if (value) {
        // 查询数据
        const unknownFind = catalogueList.find(v=>v.id == value);

        if (level == 1) {
          let twoData = catalogueList.filter(v=>v.pid == unknownFind.id);
          nodes = twoData; // 第二级
        }else if (level == 2) {
          let threeData = catalogueList.filter(v=>v.pid == unknownFind.id);
          nodes = threeData.map(v=>{return {id:v.id,name:v.name,level:v.level,leaf:true}}); // 第三级
        };
      }else {
        // 选中的第二级某位数据
        let twoFind = catalogueList.find(v=>v.id == threeFind.pid);
        // 第三级数据
        let threeData = catalogueList.filter(v=>v.pid == twoFind.id);
        // 选中的第一级某位数据
        const oneFind = catalogueList.find(v=>{return v.id == twoFind.pid});
        // 第二级数据
        let twoData = catalogueList.filter(v=>{return v.pid == oneFind.id});
        // nodes = nodes.map(v=>{return {id:v.id,name:v.name,level:v.level}}); // 第一级
        const oneIndex = nodes.findIndex(v=>{return v.id == oneFind.id});
  
        nodes[oneIndex].children = twoData; // 第二级
  
        const twoIndex = nodes[oneIndex].children.findIndex(v=>v.id == twoFind.id);
        nodes[oneIndex].children[twoIndex].children = threeData.map(v=>{ // 第三季
          return {
            id:v.id,
            name:v.name,
            level:v.level,
            leaf: true,
          }
        });
      }

      resolve(nodes);
    },

总结

到此这篇关于element-ui动态级联选择器回显问题解决的文章就介绍到这了,更多相关element-ui动态级联选择器回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue组件之间的通信方式(推荐!)

    Vue组件之间的通信方式(推荐!)

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要给大家介绍了关于Vue组件之间的通信方式,需要的朋友可以参考下
    2022-06-06
  • vue项目中使用AvueJs的详细教程

    vue项目中使用AvueJs的详细教程

    Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,这篇文章给大家介绍了vue项目中使用AvueJs的相关知识,感兴趣的朋友跟随小编一起看看吧
    2022-10-10
  • vue3 setup语法糖下的定时器的使用与销毁

    vue3 setup语法糖下的定时器的使用与销毁

    如果在组件中需要使用定时器,注意在销毁组件的时候,要对定时器进行销毁,否则时间长了会导致页面卡顿,这篇文章给大家介绍vue3 setup语法糖下的定时器的使用与销毁的知识,感兴趣的朋友一起看看吧
    2024-02-02
  • vue竖向步骤条方式

    vue竖向步骤条方式

    这篇文章主要介绍了vue竖向步骤条方式,具有很好的参考价值,希望对大家有所帮助,
    2023-12-12
  • vue2中provide/inject的使用与响应式传值详解

    vue2中provide/inject的使用与响应式传值详解

    Vue中 Provide/Inject实现了跨组件的通信,下面这篇文章主要给大家介绍了关于vue2中provide/inject的使用与响应式传值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue实现顶部导航栏以及跳转

    vue实现顶部导航栏以及跳转

    这篇文章主要介绍了vue实现顶部导航栏以及跳转方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • 详解如何使用webpack在vue项目中写jsx语法

    详解如何使用webpack在vue项目中写jsx语法

    本篇文章主要介绍了详解如何使用webpack在vue项目中写jsx语法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 如何利用Vue3+Element Plus实现动态标签页及右键菜单

    如何利用Vue3+Element Plus实现动态标签页及右键菜单

    标签页一般配合菜单实现,当你点击一级菜单或者二级菜单时,可以增加对应的标签页,当你点击对应的标签页,可以触发对应的一级菜单或者二级菜单,下面这篇文章主要给大家介绍了关于如何利用Vue3+Element Plus实现动态标签页及右键菜单的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue+OpenLayers 创建地图并显示鼠标所在经纬度(完整代码)

    Vue+OpenLayers 创建地图并显示鼠标所在经纬度(完整代码)

    这篇文章主要介绍了Vue+OpenLayers 创建地图并显示鼠标所在经纬度,本文使用的是高德地图,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • 详解vue2与vue3获取模版引用ref的区别

    详解vue2与vue3获取模版引用ref的区别

    这篇文章主要为大家详细介绍了vue2与vue3中获取模版引用ref的方法与区别,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10

最新评论