# el-tree优化
使用el-tree组件当后台返回的数据过多导致页面反应时间过长或页面崩溃的问题及解决方案
需求：
获取后台的所有目录并展示 开始的做法： 使用el-tree组件根据后台返回的数据和el-tree组件的属性绑定
<el-tree
:data="data"
show-checkbox
@check-change="handleCheckChange"
node-key="catalogId" // 节点绑定目录ID
:props="defaultProps" // 修改el-tree默认data数组参数
>
</el-tree>
// 标签里不可以写注释
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
data() {
return {
data: [],
defaultProps: [{
children: 'subCatalogDatailTree',
label: 'catalogName',
}]
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
调用后台接口获取所有的树形结构数据，渲染页面（当数据返回过多时页面反应会很慢） 解决方法：后台接口调整，点击当前节点后才展示下一级的数据，后台返回数据为列表数组 此时
<el-tree
:data="data"
show-checkbox
@check-change="handleCheckChange"
node-key="catalogId"
@node-click="handleNodeClick"
:props="defaultProps"
>
</el-tree>
methods: {
handleNodeClick(data, node) {
// data为当前节点的数据
// node为当前节点
this.axios.get(`......?userId=${this.userId}& parentCatalogId=${data.catalogId}`)
.then((res) => {
// 把获取到的数据赋给当前节点数据的children
node.data.subCatalogDatailTree = res.data.data;
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
至此，解决了树形数据过多的问题，不清楚的可以多看下开发文档