Element Plus

当我们在项目中使用element plus的树型控件时

 可能会遇到数据太多导致树结构过长的情况，若用户想要查看所有的数据结点，则需要一个一个去展开，着实影响用户体验。

这种情况我们可以用树形控件的 default-expand-all 属性，令其默认全部展开

default-expand-all

 <el-tree :data="treeData" :props="treeProps" default-expand-all show-checkbox ref="folderTreeRef" />

html

   但是默认展开后的树占用了非常大的空间，也会影响用户体验，于是我们可以增加一个按钮来控制树型结构的展开和收缩。

   这么简单的功能element官方应该会有API提供吧，但是当我们去官方文档中找时，发现根本没有这个API

但是当我们输出Tree组件时，可以发现其实是有控制节点展开或收起的属性的

const folderTreeRef = ref(null);

console.log("@", folderTreeRef.value)

javascript

运行

 于是我们可以手动给它展开收起

先定义个按钮

<div class="addContactBtn" @click="isShowMore()">

<div class="icon">

<el-icon v-if="zhanstatus % 2 == 0">

<Plus />

</el-icon>

<el-icon v-else>

<Minus />

</el-icon>

</div>

<div class="addNewCon">{{ zhanstatus % 2 == 0 ? 'Show More' : 'Show Less' }}</div>

</div>

html

样式 

.addContactBtn {

display: flex;

align-items: center;

cursor: pointer;

margin-top: 8px;

margin-left: 50px;

.icon {

width: 20px;

height: 20px;

border-radius: 20px;

border: 1px solid #0085D0;

background: #E9F2FB;

display: flex;

align-items: center;

justify-content: center;

font-size: 16px;

color: #0085D0;

}

.addNewCon {

margin-left: 8px;

color: #0085D0;

text-align: center;

font-size: 12px;

font-style: normal;

font-weight: 510;

line-height: 20px;

}

}

css

逻辑代码 

const zhanstatus = ref(1);

function isShowMore() {

zhanstatus.value++;

if (zhanstatus.value % 2 == 0) {

let nodes = folderTreeRef.value.store._getAllNodes();

nodes.forEach(item => {

item.expanded = false;

});

} else {

let nodes = folderTreeRef.value.store._getAllNodes();

nodes.forEach(item => {

item.expanded = true;

});

}

}

javascript

运行

最终实现效果