干货---Tree树形控件的应用

• 前言

• 一、Tree树形控件

• • 1 展示信息，可展开折叠

• 2 常用的属性：

• 3. 获取后端数据渲染

• 二. 页面缩放(兼容性)

• 三、table表格（树形数据与懒加载）

• 总结

---

前言

===============================================================

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Tree树形控件

=======================================================================

1 展示信息，可展开折叠

---

用于菜单导航

2 常用的属性：

---

current-node-key:标记当前选中节点

node-key:节点上绑定对应的id值

default-expand-all:展开所有树结构

highlight-current:高亮选中项

check-on-click-node：点击节点的时候选中节点

3. 获取后端数据渲染

---

第一种：需要将后端数据进行更改

// if (this.treedata[0].children.length > 0) {

// this.currentNodekey = this.treedata[0].children[0].id;

// console.log(this.currentNodekey);

// this.expanded.push(this.treedata[0].children[0].id);

// }

// if (res.data.data.length > 0) {

// //‘nextTick()’ 下次dom更新时触发回调函数

// //默认点击

// this.$nextTick().then(() => {

// const filterNode = document.querySelector(“.el-tree-node”);

// filterNode.click();

// });

// }

// 转换类型

// let data1 = res.data.data;

// function treedatas(arr) {

// arr.forEach(function(item) {

// delete item.children;

// });

// let map = {};

// arr.forEach(i => {

// map[i.id] = i;

// });

// let treedata = [];

// arr.forEach(child => {

// const mapItem = map[child.pId];

// if (mapItem) {

// (mapItem.children || (mapItem.children = [])).push(child);

// } else {

// treedata.push(child);

// }

// });

// return treedata;

// }

// this.treedata[0].children = treedatas(data1);

第二种：（后端传回的数据直接赋值到children中）

将name对应的label字段名称和id赋值到treedate的数组中我这个直接给他的children赋值就可以

至于里边的赋值id值是因为还有个table表格需要首次渲染数据，所以在此获取了id值调用了查询接口

expanded我设置的为1，展开为第一层，还有一个默认点击属性大家可以研究一下

// if (res.data.data.length > 0) {

// //‘nextTick()’ 下次dom更新时触发回调函数

// //默认点击

// this.$nextTick().then(() => {

// const filterNode = document.querySelector(“.el-tree-node”);

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

[外链图片转存中…(img-8IMXYvRq-1719250256872)]

[外链图片转存中…(img-f05hrRz9-1719250256873)]