elementui动态级联选择器回显问题怎么解决
导读:本文共2569.5字符,通常情况下阅读需要9分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 场景描述后台返回类目数组,其中有一级类目;二级类目,三级类目;这种情况下如何回显数据效果图如下:数据结构如下:id:自己的idlevel:等级pid:父级id,0位第一级name:名字[{ id:1,level:0,pid:0,name:'测试1'},{ id:2,level:0,pid:0,name:'测试2... ...
目录
(为您整理了一些要点),点击可以直达。场景描述
后台返回类目数组,其中有一级类目;二级类目,三级类目;这种情况下如何回显数据
效果图如下:
数据结构如下:
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);letnodes=[];if(level==0){//第一级nodes=catalogueList.filter(v=>{returnv.level==0});}else{//后面两级nodes=catalogueList.filter(v=>{returnv.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;constcascaderData=this.cascaderData;//第一级数据letnodes=[];nodes=catalogueList.filter(v=>{returnv.level==0});//选中的第三级某位数据constthreeFind=catalogueList.find(v=>{returnv.id==cascaderData});if(value){//查询数据constunknownFind=catalogueList.find(v=>v.id==value);if(level==1){lettwoData=catalogueList.filter(v=>v.pid==unknownFind.id);nodes=twoData;//第二级}elseif(level==2){letthreeData=catalogueList.filter(v=>v.pid==unknownFind.id);nodes=threeData.map(v=>{return{id:v.id,name:v.name,level:v.level,leaf:true}});//第三级};}else{//选中的第二级某位数据lettwoFind=catalogueList.find(v=>v.id==threeFind.pid);//第三级数据letthreeData=catalogueList.filter(v=>v.pid==twoFind.id);//选中的第一级某位数据constoneFind=catalogueList.find(v=>{returnv.id==twoFind.pid});//第二级数据lettwoData=catalogueList.filter(v=>{returnv.pid==oneFind.id});//nodes=nodes.map(v=>{return{id:v.id,name:v.name,level:v.level}});//第一级constoneIndex=nodes.findIndex(v=>{returnv.id==oneFind.id});nodes[oneIndex].children=twoData;//第二级consttwoIndex=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);},
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
elementui动态级联选择器回显问题怎么解决的详细内容,希望对您有所帮助,信息来源于网络。