最新在做一个系统,由于公司部门数量太多(1w+),ruoyi的部门管理默认加载全部数据,导致页面假死,故需要配置懒加载功能。
一、为el-table开启懒加载功能
默认配置(未开启)
1
2
3
4
5
6
7
8
9
| <el-table
v-if="refreshTable"
v-loading="loading"
:data="deptList"
row-key="deptId"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
|
开启后的配置
1
2
3
4
5
6
7
8
9
10
| <el-table
v-if="refreshTable"
v-loading="loading"
:data="deptList"
row-key="deptId"
lazy
:load="load"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
|
显然，lazy是开启懒加载功能 ,load是加载数据的方法
二、添加load方法
1
2
3
4
5
6
7
8
9
10
11
| async load(node, treeNode, resolve) {
let params = {parentId: node.deptId,status:this.queryParams.status}
await listDept(params).then(response => {
let tData = this.handleTree(response.data, "deptId");
tData.forEach(t=>{
t.hasChildren = true;
})
node.children=tData
resolve(tData)
});
},
|
三、添加initList方法来代替getList
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| created() {
this.initList();
},
methods: {
.....
initList(){
this.loading = true;
listDept(this.queryParams).then(response => {
this.deptList = this.handleTree(response.data, "deptId");
this.deptList.forEach(d=>{
d.children=null
d.hasChildren = true;
})
this.loading = false;
});
},
.....
}
|
之所以会卡死就是因为初始化时渲染的节点太多，这里获取到节点并处理为树节点后将第一层的节点的children设置为null并设置配置每一个节点都有孩子节点
四、修改handleQuery方法
旧的
1
2
3
| handleQuery() {
this.getList();
},
|
新的
1
2
3
| handleQuery() {
this.queryParams.deptName===undefined || this.queryParams.deptName===null ? this.initList() : this.getList()
},
|
五、后续问题
这样处理后就会出现一些问题，但是不影响使用
1.展开/折叠 功能失效,需要删除相关功能
2.每一个节点都是默认有孩子节点,但实际有没有需要点开才知道
六、用户列表优化
在若依的用户管理页面左侧是有部门树的,部门数量多的时候,这里也会出现假死的情况,可以添加配置解决问题。这里不需要配置懒加载。
优化前：
1
2
3
4
5
6
7
8
9
10
11
| <el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
|
优化后：
1
2
3
4
5
6
7
8
9
10
11
12
| <el-tree
:data="deptOptions"
:props="defaultProps"
render-after-expand
:expand-on-click-node="true"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
:default-expand-all="false"
highlight-current
@node-click="handleNodeClick"
/>
|
1.开启点击节点展开列表 :expand-on-click-node="true" 官网说明:是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
2.开启第一次展开某个树节点后才渲染其子节点 render-after-expand
3.关闭默认展开所有节点 :default-expand-all="false"