Tree组件的使用

1.iview中的Tree组件

• 需求：需要记忆节点的展开状态
• 思路：利用handleToggleExpand保存展开节点的id,然后渲染树前，递归树，将对应id的节点赋上expand:true

代码（Javascript）

<template>
    <Tree
      ref="modalTree"
      class="modal-tree"
      :data="dictTreeDate"
      @on-toggle-expand="handleToggleExpand"
    ></Tree>
</template>
<script>
export default {
  data() {
    return {
      // 节点展开收起保存展开状态;
      expandIds: [],
    };
  },
  mounted() {
    this.getTypeTreeData()
  },
  methods: {
    // 获取类型数据
    async getTypeTreeData() {
      let res = await getDictTypeTree()
      if (res) {
        let data = res.data || [];
        if(this.expandIds.length) {
          this.handleExpandIds(this.expandIds, data)
        }
        let treeData = [
          {
            id: '',
            name: '标签',
            parentId: '',
            children: data,
            expand: this.expandIds.length ? true : false
          },
        ]
        this.dictTreeDate = treeData
      }
    },
    handleExpandIds(ids, data) {
      // 遍历节点 ID 数组，为对应的节点增加 expand 属性
      for (let id of ids) {
        this.setNodeExpand(id, data)
      }
    },
    setNodeExpand(id, data) {
      // 遍历树形数据数组
      for (let node of data) {
        if (node.id === id) {
          // 如果当前节点的 ID 等于指定的节点 ID，则为当前节点增加 expand 属性
          node.expand = true
          break
        } else if (node.children && node.children.length > 0) {
          // 如果当前节点有子节点，则递归子节点
          this.setNodeExpand(id, node.children)
        }
      }
    },
    // 保存展开节点的id集合
    handleToggleExpand(node) {
      if(node.expand) {
        this.expandIds.push(node.id);
      }
    },

  }
};
</script>

<style scoped>
</style>

同时，贴上咱的个人博客，欢迎各位来访~
青枫阁