element

#element| 来源: 网络整理| 查看: 265

场景描述

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

效果图如下：

20221202_15：54：07_1.gif

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

数据结构如下： 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部分

然后再贴上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函数即可实现回显了；

逻辑：

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

授人以鱼不如授人以渔；如果能帮助到你，给个赞再走；你的肯定便是我继续写作的动力。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章