当前位置: 首页 > Web前端 > vue.js

网络技术分享-虚拟树

时间:2023-03-31 23:50:03 vue.js

找了半天,感觉由于项目需求,AntDesignVue中的Tree控件需要通过弹窗来移动节点,而不是拖拽。因此,基于adding,Remove实现。目前只使用了节点增删改查(删除+添加)和懒加载。开发时注意移动时懒加载的值,否则移动后展开的节点不能正常展开使用Treetree导入使用AntDesignVue中的Tree树控件导入Tree具体导入方法查看AntDesignVuedocument组件使用templateexpandedKeys展开指定的树节点loadedKeys加载的节点需要和loadData结合使用(控制是否进行懒加载,移动(删除+添加)需要):保存key表示节点已经被加载懒加载(删除节点会再次懒加载)高度固定高度,虚拟滚动相关代码:loadedKeys":height="510":tree-data="MonitorArea.options":load-data="onLoadData"><--展开和折叠自定义-->,...内容自定义...ts相关方法在vue3setup中保存懒加载加载的节点constMonitorArea=reactive({//默认展开指定节点expandedKeys:[""],loadedKeys:[""],//内容选项:[]asany[],//字段替换fieldNames:{children:"children",title:"name",key:"deviceId",},};/**延迟加载**/constonLoadData:TreeProps["loadData"]=(treeNode)=>{returnnewPromise(async(resolve)=>{//是否是子叶(无childern)if(treeNode.dataRef?.isLeaf){resolve();return;}//保存key表示该节点已经被懒加载了(删除该节点会再次被懒加载)MonitorArea.loadedKeys.push(对应节点的key);treeNode.dataRef!.children=对应节点MonitorAr的子节点列表ea.options=[...MonitorArea.options];解决();}}/**创建子节点**/searchOption(Object.assign(子节点信息,{isLeaf:true,}),MonitorArea.options,"add");/**删除子节点**/searchOption(childnodeinformation,MonitorArea.options);/**move(delete+add)node**///deleteolddataawaitsearchOption(olddata,MonitorArea.options);//过滤掉旧节点和父节点相关的懒加载MonitorArea.loadedKeys=MonitorArea.loadedKeys.filter((item)=>{returnfilter;});//同上MonitorArea.expandedKeys=MonitorArea.expandedKeys.filter((item)=>{returnfilter;});//添加移动数据searchOption(Object.assign(moveddata,{isLeaf:判断是否有childern,}),MonitorArea.options,"add");封装递归查询constsearchOption=(option:{deviceId:string;parentId:string;name:string},arr:any[],type="delect")=>{for(lets=0;s{returnitem.deviceId===option.deviceId;});如果(!isExist){arr[s].childIsNull=0;arr[s].isLeaf=false;arr[s].class="show_line";arr[s].children.unshift(选项);}}//父亲节点-删除if(type==="delect"){arr[s].children=arr[s].children.filter((item:{deviceId:string})=>{returnitem.deviceId!==option.deviceId;});如果(arr[s].children.length==0){arr[s].isLeaf=true;arr[s].class="";arr[s].childIsNull=1;}}休息;}elseif(arr[s].children&&arr[s].children.length>0){//递归条件searchOption(option,arr[s].children,type);}else{继续;}}};