需求:
点击按钮来控制数的展示折叠
vue3写法
<template><div class="input-container">
<el-input v-model="filterText" placeholder="请输入..." />
<img
v-if="showDownArrow"
style="margin-left: 7px"
src="@/assets/images/down.png"
@click="toggleTree"
/>
<img
style="margin-left: 7px"
v-else
src="@/assets/images/top.png"
@click="toggleTree"
/>
</div>
<el-tree
ref="treeRef"
class="filter-tree"
:data="treedata"
:props="defaultProps"
node-key="id"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
highlight-current
default-expand-all
/>
</template>
<style scoped>
.filter-tree {
margin-top: 10px;
}
.input-container {
position: relative;
display: flex;
align-items: center;
}
</style>
其中输入框和图片用了flex布局
js部分
const treeRef = ref(null);
const showDownArrow = ref(true);//控制出现向上或者向下的图片
const isTreeExpanded = ref(true); //树的展开状态
const toggleTree = () => {
isTreeExpanded.value = !isTreeExpanded.value;
showDownArrow.value = !showDownArrow.value;
// 根据 isTreeExpanded 的值执行展开或折叠
const treeList = treedata.value;
for (let i = 0; i < treeList.length; i++) {
treeRef.value.store.nodesMap[treeList[i].id].expanded =
isTreeExpanded.value;
}
};
vue2写法
toggleTree(){
this.isTreeExpanded= !this.isTreeExpanded;
this.showDownArrow = !this.showDownArrow;
// 根据 isTreeExpanded 的值执行展开或折叠的逻辑,例如:
const treeList = this.treedata;
for (let i = 0; i < treeList.length; i++) {
this.$refs.treeRef.store.nodesMap[treeList[i].id].expanded = this.isTreeExpanded
}
};
区别
一个 是 treeRef.value,一个 是this.$refs.treeRef