vue3和vue2分别对于tree的一键展开和折叠

左手吻左脸。

已于 2024-01-02 09:37:00 修改

阅读量806

点赞数 2

文章标签：前端

于 2023-09-02 15:19:13 首次发布

本文链接：https://blog.csdn.net/weixin_47194802/article/details/132638555

版权

需求：

点击按钮来控制数的展示折叠

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
        }
};