精华内容
下载资源
问答
  • vue中使用z-tree插件,执行异步加载时候,API文档提示必须写上。 async: { enable: true, url: "nodes.php", autoParam: ["id", "name"] } ...

    在vue中使用z-tree插件,执行异步加载时候,API文档提示必须写上。

    async: {
    		enable: true,
    		url: "nodes.php",
    		autoParam: ["id", "name"]
    	}
    

    琢磨了好久,写出来的。
    首先,要弄清楚这两个事件的方法:
    1、节点展开(点击前面那个‘+’号或双击节点)
    onExpand:节点展开的事件回调函数
    2、节点展开(点击前面那个‘-’号或双击节点)
    onCollapse:节点折叠的事件回调函数

     callback:{
                
                beforeCollapse: beforeCollapse,                //用于捕获父节点折叠之前的事件回调函数,并且根据返回值确定是否允许折叠操作
                //返回值是 true / false
                //如果返回 false,zTree 将不会折叠节点,也无法触发 onCollapse 事件回调函数
                beforeExpand: beforeExpand,                   //用于捕获父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作
                //返回值是 true / false
                //如果返回 false,zTree 将不会展开节点,也无法触发 onExpand 事件回调函数
                onCollapse: onCollapse,                      //用于捕获节点被折叠的事件回调函数
                onExpand: onExpand                      //用于捕获节点被展开的事件回调函数
            }
    

    下面附上代码:
    HTML:

        <template>
            <div>
                <div class="question_info_lists">
                    <div class="tree-box">
                        <div class="zTreeDemoBackground left">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div> </template>
    

    JS部分:

    export default {
            name: "zTree",
            data(){
                return{
                    key:false,
                    setting: {
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "id",
                                pIdKey: "pId",
                                rootPId: 0,
                            }
                        },
                        view: {
                            showLine: false,
                            dblClickExpand: false,
                            addDiyDom: this.addDiyDom,
                            nameIsHTML: true,
                            selectedMulti: false
                        },
                        callback: {
                            onClick: this.onClick,                //节点点击事件
                            onCollapse:this.onCollapse,           //点击图标按钮节点 折叠后 异步加载子数据
                            onExpand:this.zTreeOnAsyncSuccess    //点击图标按钮节点 展开后 异步加载子数据
                        }
                    },
                    zNodes:[]
                }
            },
            methods:{
                //获取菜单
                async freshArea(){
                    const param ={}
                    const result = await resTagTreeData(param)
                    if(result.code==='200000'){
                        this.zNodes = result.data.ztreeList
                        //判断是否有子节点--通过isContainSon是否大于0(也就是有终端),添加父节点为true
                        this.zNodes.forEach((item)=>{
                            if(item.isContainSon === 1){
                                item.isParent = true;
                            }
                        })
                        //数据渲染到菜单
                        $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
                    }else {
                        alert(result.message)
                    }
                },
                //点击节点
                onClick(event, treeId, treeNode) {
                    alert(treeNode.Name + ", " + treeNode.name);
                },
                zTreeOnAsyncSuccess(event, treeId, treeNode) {
                    this.addNodes(treeNode);
                },
                //点击展开图标 --加载子菜单
               async addNodes(treeNode){
                    //this.key=false
                    const param = {
                        "id":treeNode.id,
                        'labelType':treeNode.labelType
                    };
                   // console.log(param)
                    const treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                    const parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点
                    const childNodes = treeObj.transformToArray(treeNode);//获取子节点集合
                   //点击事件后将子节点清空后在进行拼接
                   treeNode.children = [];
                   //因为子节点还包括组织,所以这里需要筛选一下
                   if(treeNode.isParent){
                       const result = await resChildrentreeData(param)
                       if(result.code==='200000'){
                           const childrenData=eval(result.data.ztreeList)
                          // console.log(childrenData)
                           //判断子节点是否包含子元素
                           for(var i in childrenData){
                               if(childrenData[i].isContainSon === 1){
                                   childrenData[i].isParent = true;
                               }
                           };
                           //console.log(childrenData)
                           treeObj.refresh();
                           treeObj.addNodes(parentZNode,childrenData, false);    //添加节点
                           //this.key = true
                       }else {
                           alert(reslut.mes)
                       }
                   }
               }
            },
            mounted(){
                this.freshArea()
               //$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
            }
        }
    
    展开全文
  • html <el-form-item label="门店:" :label-width="formLabelWidth"> <el-tree :props="props" :load="loadNode" node-key="id" ref="tree" highlight-current lazy show-che

    html

    <el-form-item label="门店:" :label-width="formLabelWidth">
        <el-tree
                :props="props"
                :load="loadNode"
                node-key="id"
                ref="tree"
                highlight-current
                lazy
                show-checkbox
                @node-click="handleNodeClick"
                expand-on-click-node
        ></el-tree>
    </el-form-item>
    

    js

    data() {
      return {
    	props: {
    	    label: "regionName",//这里是树结构中需显示的数据(即接口返回的需展示在页面上的参数)
    	    children: [],
    	    isLeaf: "leaf"},
    		}
    },
    methods: {
    	        handleNodeClick(data) {
                    console.log("node", data);
                },
                // 异步树叶子节点懒加载逻辑
                loadNode(node, resolve) {
                    // 一级节点处理
                    if (node.level === 0) {
                        this.requestTree(resolve);
                    }
                    // 其余节点处理
                    if (node.level === 1 || node.level === 2) {
                        // 注意!把resolve传到你自己的异步中去
                        this.getIndex(node, resolve);
                    }
    				//该级为获取门店为业务逻辑,获取省市区不需要
                    if (node.level === 3) {
                        this.getIndexStore(node, resolve);
                    }
                },
                // 首次加载一级节点数据函数
                requestTree(resolve) {
                    getFirstRegion().then(res => {
                        if (res.code === 200) {
                            let data = res.data;
                            resolve(data);
                        } else {
                            this.$message.error(res.message);
                        }
                    }).catch(error => {
                    });
                },
                // 异步加载叶子节点数据函数
                getIndex(node, resolve) {
                    getSecondRegion(node.data.id).then(res => {
                        if (res.code === 200) {
                            let data = res.data;
                            resolve(data);
                        } else {
                            this.$message.error(res.message);
                        }
    
                    })
                },
                getIndexStore(node, resolve) {
                    getStoreRegionList({customerId: this.customerId, regionId: node.data.id}).then(res => {
                        if (res.code === 200) {
                            let data = [];
                            res.data.map(v => {
                                let obj = {};
                                obj.regionName = v.storeName;
                                obj.id = v.id;
                                obj.leaf = true;
                                data.push(obj);
                            });
                            resolve(data);
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                },
                getCheckedNodes() {
                    console.log(this.$refs.tree.getCheckedNodes());
                },
    }
    
    展开全文
  • vue-iview异步加载渲染树

    千次阅读 2018-12-14 11:27:41
    Tree v-show=“curType==‘archive’” :data=“archiveTree” :load-data=“loadData” @on-select-change=“selectChange” :show-check=“false”&amp;amp;gt; data () { return { archiveTree:[],树的...
    <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    //展开子节点
                 })
               })
             }
           },
    
    展开全文
  • element-ui异步加载行政区划树 功能:进入页面,左侧显示行政区划树的顶级目录,单击目录左侧的箭头,则向后端发送请求,获得该级目录的子目录;以此类推;点击目录本身,则向后端发请求和右边的列表进行联动; ...
    element-ui异步加载行政区划树
    功能:进入页面,左侧显示行政区划树的顶级目录,单击目录左侧的箭头,则向后端发送请求,获得该级目录的子目录;以此类推;点击目录本身,则向后端发请求和右边的列表进行联动;
    
    首先说后台返回的数据构成:ajax的列表
    	id-uuid label-名称 ztreeType-(0显示行政区划下的子区划,1显示行政区划下的部门) hasChild-是否有子节点
    
    前端树代码:
    	<el-tree
    		:props="defaultProps"  //这个很重要,element-ui的树自带node属性,这个属性要和后端返回的数据映射
    		:expand-on-click-node="false"
    		:filter-node-method="filterNode"
    		:default-expand-all="false"
    		ref="tree"
    		lazy
    		:load="loadNode"
    		node-key="id"
    		highlight-current
    		@node-click="handleNodeClick"
    	>
    	</el-tree> 
    属性:
    	defaultProps:{
    		children:[],
    		label:'label',
    		id:'id',
    		isLeaf:'hasChild'
    	},
    
    方法:
    //筛选节点
    	filterNode(value,data){
    		if(!value) return true;
    		return data.label.indexOf(value)!==-1;
    	}
    //节点单击事件
    	handleNodeClick(data){
    		this.queryParams.deptId = data.id;
    		getList();
    	}
    //异步树叶子节点懒加载逻辑
    	loadNode(node,resolve){
    		//此方法是进入页面后自动运行的,两个参数也是默认加载的
    		//一级节点处理
    		if(node.level==0){
    			this.requestTree(resolve);
    		}
    		//其余节点处理
    		if(node.level>=1){
    			this.getIndex(node,resolve);
    		}
    	},
    //首次加载一级节点数据函数
    	requestTree(resolve){
    		regionTree({regionCode:370000}).then(response=>{
    			response.data.forEach(item=>{
    				if(item.hasChild=='true'){
    					item.hasChild = false
    				}else{
    					item.hasChild = true
    				}
    			})
    			resolve(response.data)
    		}).catch(err=>{})
    	},
    //异步加载叶子节点函数
    getIndex(node,resolve){
    	regionTree({regionCode:node.key}).then(res=>{
    		res.data.forEach(item=>{
    			if(item.hasChild=='true'){
    				item.hasChild = false
    			}else{
    				item.hasChild = true
    			}
    		})
    		resolve(res.data);
    	}).catch(err=>{})
    },
    
    

     

    展开全文
  • vue ant-design Tree树结构 同步加载

    千次阅读 2020-04-30 15:36:20
    公司业务需要,让我一个后台,...官网的是异步加载,但是也不可用,这里是没有**return resolve()**这个方法的,和Element UI的写法不同,大家千万不要忘了! 树结构 <a-tree :treeData="treeData" :loadData...
  • 分析原因:antdesignvue的前端是一次性渲染的,所以defaultExpandedRowKeys等只在渲染时有效。 解决方法:添加判断v-if你的DataSource长度,如果为0则不渲染。 动态解决方法:在DataSource赋值的时候,使用splice将...
  • ElementUI实现异步加载

    千次阅读 2019-08-20 14:21:44
    路由文件修改 import List from '@/components/list.vue' import Add from '@/components/add...import Tree from '@/components/tree.vue' import AsynTree from '@/components/asyntree.vue' export default{ ro...
  • 最近在数据源管理功能,需要以树的形式异步展现: 根节点可以新增目录。 目录节点可以新增目录,编辑目录,新增主数据。 主数据节点无操作按钮。 找到element-ui的官方文档,el-tree。(地址:...
  • 前言Tree组件在实际应用中非常广泛,例如省市县地域的展现....•实现一个基础版可以显示嵌套数据的Tree组件•点击Tree组件的某一级标签它的下一级数据支持异步加载Tree组件的节点支持拖拽最终Demo的效果图如下.基...
  • Vue实现一个Tree组件

    2020-12-26 23:20:39
    点击Tree组件的某一级标签它的下一级数据支持异步加载 Tree组件的节点支持拖拽 最终Demo的效果图如下. 基础版的Tree 实现一个基础版的Tree组件十分简单,原理就是掌握组件嵌套的使用方法. 外部调用 首先设置外部
  • el-tree-fransfer 是一个基于 VUE 和 element-ui 的树形穿梭框组件,使用前请确认已经引入element-ui! 此组件功能类似于element-ui的transfer组件,但是里面的数据是树形结构! 实际上,el-tree-transfer 依赖的 ...
  • v-if="leftModelTree.length" 解决异步加载数据后,展开所有节点失败的问题 :tree-data="leftModelTree" 数据源 :replaceFields="replaceFields" 自定义渲染字段title、key、children :defaultExpandAll="true" ...
  • 基于vue封装的树形菜单,v-tree

    千次阅读 2018-12-03 22:28:17
    对树形菜单进行封装,实现基本功能,支持单选,多选,以及相关回调函数,和节点操作,目前版本为1.0.0 。 实现功能: 单选、复选、复选是/否级联选择(默认级联选中)、是否...异步加载数据   &lt;...
  • 树形数据子节点数据的异步加载 表格上的属性添加 这里需要添加的属性: #直接添加,不需要修改 :tree-props="{children:'children',hasChildren:'hasChildren'}" #函数名称,修改成自己的 :load="loadRecord" #row-...
  • 代码地址:https://github.com/MarxJiao/vue-karma-test/tree/spec-demo 测试关注点 对于vue组件,单元测试测试主要关注以下几点: vue组件加载后,各数据模型是否符合预期 定义的方法是否可用 filter是否可用 ...
  • 选中结果过滤掉叶子节点, 异步加载时需手需提供 isLeaf Boolean false rootName 根节点名称,仅 data 为数组时有效,此时不会默认 String null expandClass 展开收起图标class String vs-expand-icon theme ...
  • Vue的性能优化

    2020-09-05 16:44:58
    Vue的性能优化 ...使用路由懒加载异步组件 防抖、节流 第三方模块按需导入 长列表滚动到可视区域动态加载 图片懒加载 SEO优化 预渲染 服务端渲染SSR 2、打包优化 压缩代码 Tree Shaking/Scope Hoist
  • antd vue中树形控件动态增删改操作

    千次阅读 2020-07-22 10:44:30
    注:此树形结构的操作,不能使用异步加载,否则无法进行实时更新(使用异步加载时,需要通过刷新接口才能动态改变) 实时更新删改的核心代码: searchTree(option, arr, type = 'dele'){ //参数:查找的节点数据、被...
  • 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, ...
  • 编码阶段 尽量减少data中的数据,data...使用路由懒加载异步组件 防抖、节流 第三方模块按需导入 长列表滚动到可视区域动态加载 图片懒加载 SEO优化 预渲染 服务端渲染SSR 打包优化 压缩代码 Tree Shaking/Scop
  • 主要是由于ant-design组件数据是单向流动的,树形控件/表格在第一次渲染时异步加载的数据还未存在。所以用v-if确保数据存在再渲染组件。 <a-row class="tree-box"> <a-col> <a-tree v-if=...
  • 根节点 async 没有触发

    2020-12-26 05:21:43
    <div><p>根节点设置了async 没有触发异步加载,只有第二层的 async 有效,这个是基于什么考虑呢!还是我这边用得不对吗?</p><p>该提问来源于开源项目:halower/vue-tree</p></div>
  • 2020-08-21

    2020-08-21 16:46:49
    你都做过哪些Vue的性能优化?...使用路由懒加载异步组件 防抖、节流 第三方模块按需导入 长列表滚动到可视区域动态加载 图片懒加载 SEO优化 预渲染 服务端渲染SSR 打包优化 压缩代码 Tree Shaking/Scope ..
  • 然后再将剩余部分的CSS用异步的方式加载。可以通过<a href="https://github.com/addyosmani/critical">Critical做到这一点。 <h3>4.4 资源提示(Resource Hints) <p><a href=...
  • │ ├── asyncComponent.jsx -------异步加载组件 │ └── commons.js ---------------公用方法 ├── README.md ----------------------README └── tree.md --------------------------项目结构
  • // 用到异步加载模块 asyncComponent,需要抽离,加载首屏速度 document.getElementById('xxxxx').addEventListener('click', () => { import( /* webpackChunkName: "...
  •  enable: true, // true 表示 开启 异步加载模式  chkboxType: {<!-- -->  "Y": "p",  "N": "s"  }, //被勾选时关联父,取消勾选时关联子...
  • <div><h2>3月份前端资源分享 ...几种常见的JavaScript混淆和反混淆工具分析实战</a></li><li><a href="http://gold.xitu.io/entry/56dfce84f3609a005536a53a">让图片加载这件事儿变得更美好</a></li><li><a href=...

空空如也

空空如也

1 2
收藏数 30
精华内容 12
关键字:

treevue异步加载

vue 订阅