vue-iview异步加载渲染树

<Tree v-show="curType=='archive'"  :data="archiveTree" :load-data="loadData" @on-select-change="selectChange" :show-check="false"> </Tree>
data () {return {archiveTree:[],树的集合id:-1,//根节点}}
mounted() {//生命周期函数，页面刷新时调用此方法初始化树this._loadData(this.id,(array) =>{this.archiveTree=array})},methods: { loadData (item, callback) {//异步加载的方法 this._loadData(item.id,callback)},_loadData(code,callback){ //发送请求并且对后台的数据进行处理this.$axios.get('/api/cate/SelectNode?pcode='+code).then((res)=>{const array=[] //创建一个数组console.log(res.data)for(let i=0;i<res.data.length;i++){let item=res.data[i]  array.push(item={id:item.id,title:item.title,loading:false,children:[],source:item})//将返回值赋值给新数组在这里可以给json对象添加属性if(item.source.leaf) delete item.loading}callback(array) /返回新数组})},selectChange(selectedList){//获取当前点击的节点const node = selectedList[selectedList.length - 1]this.$axios.post('/api/cate/SelectTrss',this.qs.stringify({id: node.id                })).then(res => {const  list=[]for(let i=0;i<res.data.length;i++){let items=res.data[i]list.push(items={title:items.name,type:'text'})}console.log(list)this.fields= list;})if(node){this._loadData(node.id,(res)=>{if(!res)return //没有子节点则返回let array=[]res.forEarch(item => {//遍历子节点然后在各子节点上递归调用请求下一层后代array.push(item)this._loadData(item.id,()=>{              })node.children=array //挂载子节点node.expand=true    //展开子节点})})}},

vue-iview异步加载渲染树相关推荐

在Vue中异步加载数据渲染到Dom
在Vue中异步加载数据渲染到Dom 问题 <div v-for="o in resmessage" :key="o" class="text i ...
bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）...
概述后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件. 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加 ...
vue 项目ztree 异步加载树
1.在data()添加setting设置 setting: {data: {simpleData: {enable: true,idKey: "",pIdKey: "&q ...
异步加载在Vue生命周期哪个阶段更合理
react高阶面试题中有这么一道:为什么异步请求数据在didMount阶段更合适?同为MVVM中的翘楚,Vue是否也有类似问题呢?另外,我在平时也无开发过程中也会发现,每个人选择的那个生命周期阶段去异 ...
性能优化---vue路由懒加载和异步组件
1.路由懒加载整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块. 实现方式有: 1.require:加载组件. component: resolve => req ...
vue进阶测试——生命周期和异步加载的微妙关系
本文继续探索vue中的坑,关于vue的生命周期和异步加载相关处理的文章还比较少,可能是自己没有用谷歌而用百度的缘故吧.关于异步操作和生命周期,会牵扯到浏览器的单线程处理机制,以及ES中的promise ...
html 加载高德地图,vue异步加载高德地图
几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的 ...
浏览器渲染阻塞与优化-详解推迟加载、异步加载。
我认为一个前端工程师是否优秀,很大程度上取决于对前端性能上优化的功力.所以性能优化对前端真的很重要!!! 本文介绍了什么是阻塞.为什么会阻塞?阻塞优化常用的5种方式以及他们的注意事项. 浏览器渲染阻塞 ...
Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...

vue-iview异步加载渲染树

vue-iview异步加载渲染树相关推荐

最新文章

热门文章