点击按钮动态控制iview树形控件展开收起

wish-hjj

已于 2022-03-16 11:22:27 修改

阅读量1.2k

点赞数 8

文章标签： javascript

于 2022-03-16 11:21:32 首次发布

本文链接：https://blog.csdn.net/m0_61896181/article/details/123521844

版权

本文介绍了一个Vue.js组件的实现，通过`<Tree>`组件展示数据，并利用`isOpen`变量控制树形结构的展开和关闭。`changes`方法用于递归设置节点的展开状态，而`selectChange`方法在选中节点时更新其展开状态。使用`this.$set`确保数据响应性，从而实时更新视图。

摘要由CSDN通过智能技术生成

组件：

<template>
  <div id="app">
    <Button type="warning" @click="changes(data1, isOpen)">{{
      isOpen ? "点击展开" : "点击关闭"
    }}</Button>
    <Tree :data="data1" @on-select-change="selectChange"></Tree>
  </div>
</template>

初始化数据：

export default {
  data() {
    return {
      isOpen: true,
      data1: [
        {
          title: "parent 1",
          children: [
            {
              title: "parent 1-1",
              children: [
                {
                  title: "leaf 1-1-1",
                },
                {
                  title: "leaf 1-1-2",
                },
              ],
            },
            {
              title: "parent 1-2",
              children: [
                {
                  title: "leaf 1-2-1",
                },
                {
                  title: "leaf 1-2-1",
                },
              ],
            },
          ],
        },
      ],
    };
  },

isOpen控制tree是否展开与收起，false收起，true展开。

方法：

 methods: {
    changes(treeData, flag) {
      for (let i = 0; treeData && i < treeData.length; i++) {
        this.$set(treeData[i], "expand", flag);
        if (treeData[i].children) {
          treeData[i].children = this.changes(treeData[i].children, flag);
        }
      }
      this.isOpen = !flag;
      return treeData;
    },
    selectChange(data, selectedNode) {
      this.$set(selectedNode, "expand", !selectedNode.expand);
    },
  },

使用this.$set确保被创建后的对象也是响应式，触发视图的更新。