文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

elementui动态级联选择器回显问题怎么解决

2023-07-05 07:40

关注

这篇文章主要讲解了“elementui动态级联选择器回显问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“elementui动态级联选择器回显问题怎么解决”吧!

场景描述

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

效果图如下:

elementui动态级联选择器回显问题怎么解决

数据结构如下:

[    {    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);    },

感谢各位的阅读,以上就是“elementui动态级联选择器回显问题怎么解决”的内容了,经过本文的学习后,相信大家对elementui动态级联选择器回显问题怎么解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯