vue中ztree使用懒加载的方法

正常引用过后使用：

import tree from “vue-giant-tree”;

<tree:setting="setting":nodes="data"@onClick="selectTree"@onCreated="handleCreated"/>
<Spin size="large" fix v-if="loading"></Spin>

注意data中的setting：

ztreeObj: null,ztreeObjEdit: null,//ztree配置，参照ztree官网的配置
setting: {check: {enable: true,chkStyle: "checkbox",chkboxType: { Y: "s", N: "s" },},async: {enable: true,//异步请求一定要是truetype: "get",//根据请求类型自己定义url: "/api/getId",  //这里写接口名autoParam: ["id=parentId"], //接口输入的参数，我这里是parentIdheaders: {accessToken: window.localStorage.getItem("accessToken"),  //这边写接口头部，格式与平常的一样},dataFilter: function(treeId, parentNode, resData){console.log(resData.result)if (resData.result!=null) resData.result.forEach(i=>{i.title=i.titleExt})return resData.result},},// view: {//   expandSpeed: 500,// },data: {key: {name: "title",children:"childs"//子节点 注意如果第一节点中含children而我们未写此参数时，树默认判断已经进行异步操作，将不执行异步},simpleData: {//是否使用简单数据模式enable: true,//树节点id，一般是后台数据库主键idKey: "value",//父级idpIdKey: "parentId",rootPId: "0",},},//ztree回调函数callback: {//树选择事件onClick: this.selectTree,onExpand: this.zTreeOnExpand,beforeExpand: this.zTreeBeforeExpand,},},

几个使用到的方法：

handleCreated(ztreeObj) {console.log("加载树完成");this.ztreeObj = ztreeObj;// let firstTree = ztreeObj.getNodes()[0];// 默认选中第一个// ztreeObj.selectNode(firstTree);// 设置节点全部展开// ztreeObj.expandAll(true);//加载完自动点击第一个，加载右边表格// this.setting.callback.onClick(null, firstTree.id, firstTree)}, //树初始化
zTreeOnExpand() {this.loading = false;},zTreeBeforeExpand() {this.loading = true;}, //做了个展开时有加载的动画效果
selectTree(evt, treeId, treeNode) {//在点击的节点上增加节点getId(treeNode.id).then(res=>{ //调接口if (res.success) {let add=res.resultadd.forEach((i) => {i.isParent = false;i.isunit = true;i.iconSkin=i.icon+ " icon" //加上图标 });if (v[0].isParent == false && add.length>0) {var selectedNode = this.ztreeObj.getSelectedNodes();this.ztreeObj.addNodes(selectedNode[0], add,true); // 参数为：选中的节点，要增加的节点，是否展开，true为不展开，false为展开}}this.loading = false;})}// 使默认无图标时将预留出来的空格去掉可以添加样式：
//.ztree .ico_open,
//.ztree .ico_close,
//.ztree .ico_docu {//display: none !important;
//}

vue中ztree使用懒加载的方法相关推荐

vue中实现图片懒加载的方法（一）
1.背景: 前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载. 2.懒加载的意义图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是 ...
vue中的路由懒加载
文章目录路由懒加载 vue异步组件 ES import 常用路由懒加载懒加载本质是延迟加载或按需加载,即在需要的时候的时候进行加载. 首页不用设置懒加载,一个页面加载过后再次访问不会重复加载. ...
vue打开html自动加载js,vue.js怎么实现懒加载
本文环境:windows7.vue2.9.6,该方法适用于所有品牌的电脑. vue.js实现懒加载的方法: 一.为什么需要懒加载在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异 ...
React中实现图片懒加载
1. 下载安装懒加载模块 cnpm i react-lazyload --save 2. 在src/assets/目录下放入懒加载占位图 placeholder.gif 3. 在需要使用懒加载 ...
Vue中如何进行滚动加载与无限滚动？
Vue中如何进行滚动加载与无限滚动? 随着Web应用程序的复杂性和数据量的增加,滚动加载和无限滚动成为了Web开发中常见的需求.在Vue中,我们可以使用一些插件和技术来实现这些功能. 本文将介绍Vue ...
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...
vue 2.0 图片懒加载
1 vue官网 https://v2.cn.vuejs.org/ 2. vue找到官网推进的项目与插件(Awesome Vue) https://github.com/vuejs/awesome-vu ...
工作中遇到的懒加载问题
1.懒加载懒加载(LazyLoad)一直是前端的优化方案之一.它的核心思想是:当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 2.遇到的问 ...
Swift中如何重新懒加载
2019独角兽企业重金招聘Python工程师标准>>> 在OC中,重新让一个控件重新调用懒加载方法只需要把这个控件指向nil. self.<控件> = nil; 但是Sw ...

vue中ztree使用懒加载的方法

vue中ztree使用懒加载的方法

vue中ztree使用懒加载的方法相关推荐

最新文章

热门文章