假如我们的树形图含有大量的数据，一次全部加载出来会很慢，用户体验不好，所以我们要做数据的分级加载，也就是懒加载，但如果每级的数据量也很大，就需要每一级都做分页加载了。
懒加载
数据懒加载elementUI给出了方法，这里不再赘述，链接如下：https://element.eleme.cn/#/zh-CN/component/tree
分页加载+懒加载
如果我们既需要数据的懒加载，也需要数据的分页加载，那么我们便不能使用elementUI提供的懒加载方法了，因为我们没有办法在分页加载时拿到loadNode函数的所需要的参数node和resolve。
先来说下我们的需求：
- 数据分级加载
- 每级数据分页加载
- 点击树形图的每一项时，该项高亮，并派发事件
- 分页加载的触发方式为在固定高度的区域上拉加载更多
- 在别的模块显示树形图点击层级，eg:XXX总公司/北京分公司/研发部/前端
- 默认展开树形图的第一项
看下我们的页面：
<div class="tree" @scroll="rollingLoad"> //绑定树形图上拉加载更多数据
<div class="tree-wrapper" v-loading="loading"> //加载数据时loading状态
<el-tree
class="el-tree"
:data="departmentData" //树形图的所有数据
node-key="id"
ref="department"
highlight-current
lazy //开启懒加载
:props="departmentDefaultProps" //配置选项
:default-expanded-keys="defaultExpanded" //默认选中
@node-click="departmentNodeClick" //节点被点击时的回调
@node-expand="departmentNodeExpand" //节点被展开时触发的事件
@node-collapse="departmentNodeClose" // 节点被关闭时触发的事件
empty-text="暂无数据~">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<i :class="data.icons" class="iconfont"></i>
<span
class="peopel-title"
:class="{ 'checked-color' : data.isChecked }">
{{ data.name }}
</span>
<span
class="peopel-dept-name"
:class="{ 'checked-color' : data.isChecked }">
({{ data.user_count }})
</span>
</span>
</span>
</el-tree>
</div>
</div>
上拉加载更多的实现
/**
* 滚动加载
* @return {Boolean} 滚动加载开关
*/
scrollLoad(event) {
let target = event.target;
const offsetHeight = target.offsetHeight;
const scrollTop = target.scrollTop;
const scrollHeight = target.scrollHeight;
if ((offsetHeight + scrollTop) - scrollHeight >= -100) {
return true;
} else {
return false;
}
},
/**
* 判断当前tab是否需要滚动加载
* @param {String} name 那个地方触发了滚动加载
*/
rollingLoad(event) {
clearTimeout(this.scrollTimer)
this.scrollTimer=setTimeout(()=>{
if (this.scrollLoad(event) && this.scrollLoadingFlag) { //scrollLoadingFlag为true说明可以进行下一次请求
this.checkedData.page += 1; //下一次请求时，pn++
this.loadData(this.checkedData.id, this.checkedData, this.checkedData.page) //请求函数
}
},300)
},
加载数据
首先分析下我们需要在加载数据的时候有哪些情况：
- 第一次加载最外层数据，此时需要一个初始id，这个id我们是知道的，在我的项目里为-1，需要当前层级pn为0，还需要默认选中第一项，并展开（展开意味着加载它的下一级数据）
- 当前层级数据的分页加载，此时需要当前数据的pn值和id，还需要当前层级的数据数组，以便在我们请求回来数据后进行拼装
- 请求下一层数据，此时需要当前层级的id值，pn为0，还需要当前点击的item的值，以便在我们请求会回数据后，把数据设置为item的children属性，去渲染下一层数据
综上，我们的每一次请求都需要一个id值，一个pn值，最好还有一个当前点击的item。所以loadData()函数接收3个形参，即loadData(id,data.pn)
我们可以在element文档中发现，当节点被展开和点击时，我们都可以拿到当前节点的数据，当前节点的 Node 对象。
image.png
所以我们可以使用如下方法去加载数据：
loadData(parent_id = -1, data = {children: []}, pn = 0){
this.loading=true; //设置loading状态
//如果pn=0,data.children的长度大于0 ，说明该级数据已经加载过，应该是树形被合上又展开的操作
//正常加载数据时，pn==0的同时data.children==0说明第一次加载该级数据
//pn!=0,data.children.length>0,分页加载该级数据
if (pn === 0 && data.children.length && data.children.length > 0) {
return;
}
this.scrollLoadingFlag=false; //加载开关关闭
let params = {
parent_id: parent_id,
pn: pn,
pl: this.pl,
type: this.type
};
this.$axios
.get(
`XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX`,
{ params: params }
)
.then(res => {
this.scrollLoadingFlag=true; //加载开关打开
this.loading=false;
let { list } = res.data||[];
// 重置滚动加载事件开关
if (list.length < this.pl) {
this.scrollLoadingFlag = false; //如果获取到的数据小于pl，数据加载完，关闭开关
}
//初始化右侧数据
list.map((v, i) => {
if (v.subordinate_count > 1) { //，subordinate_count 大于1说明有下一级
v["isLeaf"] = false;
v["children"] = [];
}
})
if(parent_id&&parent_id===-1){ //如果是第一级数据
list.map(v=>{
v["icons"] = "el-icon-max-zuzhijiagou-";
})
list[0]["isChecked"] = true; //默认选中第一级数据第一个
this.defaultExpanded=[list[0].id]; //默认展开第一级数据第一个
this.checkList.push(list[0]); //缓存点击层级顺序
this.checkedData=list[0]; //缓存点击层级顺序
this.loadData(list[0].id, list[0], list[0].page, list[0]); //加载默认展开的下一级数据
}
// 判断当前节点是要添加子节点还是滚动加载
if (this.departmentData.length === 0 && pn === 0) { //如果树形图数据长度为0并且pn=0，说明第一次加载数据，直接赋值
this.departmentData = list;
} else if (data.children && data.children.length === 0) { //如果当前点击项children长度等于0，说明第一次加载下一级
this.$set(data, "children", list)
} else {
data.children = data.children.concat(list) //其他情况为分页加载，拼接数据
}
})
.catch(err => {
this.loading=false;
this.scrollLoadingFlag=true;
this.$message.closeAll();
this.$message.error("请求超时");
});
},
节点展开
/**
* 节点被展开
* @param {Object} e tree的node节点数据
* @param {Object} node tree的node的props数据
*/
departmentNodeExpand(e, node) {
console.log(e, '节点展开')
this.checkedData = e;
if (e.isLeaf && node.isLeaf||(e.children&&e.children.length>0)) return;
this.loadData(e.id, e, e.page);
},
节点点击
/**
* 节点被点击
* @param {Object} e tree的node节点数据
*/
departmentNodeClick(e, node, a) {
this.handleGray(this.checkList); //将被点击列表取消高亮
this.$store.dispatch("set_getRequestUser", Object.assign({}, { //往外派发点击数据
id:e.id,
name:e.name
}));
this.checkedData = e; //设置checkedData
this.parent_id = e.id;
this.checkList = [];
this.handleBlue(node); //将选中项高亮
},
其他方法
handleBlue(node) {
if (node.parent) {
this.checkList.push(node.data);
this.handleBlue(node.parent);
} else {
this.checkList.reverse();
this.checkList.map(v => {
v["isChecked"] = true;
});
this.$store.dispatch("set_getRequestUserAll",JSON.parse(JSON.stringify(this.checkList)));
return;
}
},
handleGray(arr){
arr.map(v=>{
v['isChecked']=false;
})
}
