首页 > 其他分享 >vue 数组转组织树

vue 数组转组织树

时间:2022-12-06 11:00:29浏览次数:32  
标签:vue return level 组织 tree item let 数组 data

 // 树节点中查询遍历组织
    getNode(data, key, val) {
      let treeNode = "";
      data.some(item => {
        let flag = false;
        console.log("item[" + key + "]", item[key], "val", val);
        if (item[key] === val) {
          treeNode = item;
          flag = true;
        } else if (item.children && item.children.length) {
          treeNode = this.getNode(item.children, key, val);
          if (treeNode) flag = true;
        }
        return flag;
      });
      return treeNode;
    },
    changeCurrentNode(id) {
      var id = this.$isEmpty(id) ? "" : id;
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.$isEmpty(id) ? null : id);
      });
      this.currentNodeKey = id;
      this.$nextTick(() => {
        const node = this.$refs.tree.getNode(this.currentNodeKey);
        console.log("node--->", node);
        this.handleNodeClick(node.data);
        this.scrollToTreeCurrent(node);
      });
    },
    // 定位到tree选择位置
    scrollToTreeCurrent(parentNode) {
      if (!parentNode) return false;
      let level = -1;
      let dom = document.querySelector(".brand-tree"); // 获取 tree外层的dom
      let nodeCount = 0; // tree中展开节点总数
      let nodeIndex = 0; // tree中选中节点

      // 获取tree节点高度
      let nodeHeight = 30;

      // 通过选中节点 获取顶层父节点 并展开
      while (level != 0) {
        this.$refs.tree.store.nodesMap[
          parentNode.data[this.nodeKey]
        ].expanded = true;
        parentNode = parentNode.parent;
        level = parentNode.level;
      }

      this.$nextTick(() => {
        const getNodeCount = function(val) {
          val.childNodes.forEach(e => {
            nodeCount++;
            if (e.isCurrent) {
              nodeIndex = nodeCount;
            }
            if (e.expanded) {
              getNodeCount(e);
            }
          });
        };
        getNodeCount(parentNode); // 获取展开节点总数和高亮节点位置

        // 计算 选中节点位置 并通过scrollTo方法定位
        let height = Number(
          window.getComputedStyle(dom).height.replace("px", "")
        );
        // 计算位置大约在tree中间
        let scroll = Math.max(nodeIndex * nodeHeight - 0.4 * height, 0);
        console.log("scroll--->", window.getComputedStyle(dom).height);
        setTimeout(() => {
          dom.scrollTo(0, scroll);
        }, 300);
      });
    },

//数组转为组织树
    arrToTree(_data) {
      let data = this.$deepClone(_data);
      let result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      data.forEach(item => {
        delete item.children;
      });
      let map = {};
      data.forEach((item, index) => {
        item.index = index;
        map[item.id] = item;
      });
      data.forEach(item => {
        let parent = map[item.pId];

        if (parent) {
          (parent.children || (parent.children = null)).push(item);
        } else {
          result.push(item);
        }
      });
      return this.arrayTreeAddLevel(result);
    },
    // 给组织树添加level标识
    arrayTreeAddLevel(array, levelName = "level", childrenName = "children") {
      if (!Array.isArray(array)) return [];
      const recursive = (
        array,
        level = -1,
        name = "",
        nameSecond = this.nameSecond
      ) => {
        level++;
        return array.map(v => {
          v[levelName] = level;
          v[nameSecond] = name == "" ? v.name : name + "-" + v.name;
          const child = v[childrenName];
          if (child && child.length)
            recursive(child, level, v[nameSecond], nameSecond);
          return v;
        });
      };
      return recursive(array);
    },

  

标签:vue,return,level,组织,tree,item,let,数组,data
From: https://www.cnblogs.com/charlie098765/p/16954608.html

相关文章

  • 连续子数组的最大和
    public class Solution {    public int FindGreatestSumOfSubArray(int[] array) {        int[] dp = new int[array.length];     ......
  • Vue 中使用 tailwindcss
    Vue2中使用tailwindcssnpmitailwindcss@3postcss@8autoprefixer@10-Dnpxtailwindcssinit-p//tailwind.config.js/**@type{import('tailwindcss').Config......
  • .NET性能优化-ArrayPool同时复用数组和对象
    前两天在微信后台收到了读者的私信,问了一个这样的问题,由于私信回复有字数和篇幅限制,我在这里统一回复一下。读者的问题是这样的:大佬您好,之前读了您的文章受益匪浅,我们有......
  • vue 本地运行和打包部署后页面布局效果不一致的原因
    原因:style没有添加上;同一个盒子多次添加style(或者说和本地添加的style的顺序反了)解决方式:第一个原因:main.js文件中import引入文件先后顺序问题importVuefrom'v......
  • Vue项目部署后,刷新提示404
    本文来自博客园,作者:Carver-听风,转载请注明原文链接:https://www.cnblogs.com/carver/articles/16633191.html一、遇到的问题Vue项目打包部署到线上后,刷新页面会提示404......
  • Avue记(一)
    (1)Avueoption可直接调用组件component属性--子组件接收参为str{label:'模板内容',prop:'content',type:'textarea',......
  • Vue.js:v-charts根据E-charts修改样式
    以饼状图为例子:首先importimportVeRingfrom'v-charts/lib/ring'在<template>加上<ve-ring><ve-ringstyle="background:#F9F9F9":data="chartDataRing":sett......
  • hdu6153后缀数组或扩展KMP
    前两天刷了几题leetcode,感觉挺简单,于是又想刷刷hduoj了。随便打开没做过的一页,找了一题通过人数最多的,就是这道6153.①.看完题没想太多,觉得应该是后缀数组(多年没刷题的我......
  • Vue的MVVM模型
    MVVM模型            1.M:模型(Model):data中的数据            2.V:视图(View):模板代码        ......
  • Vue之el与data的两种写法
    data与el的2种写法          1.el有2种写法                  (1).newVue时候配置el属性。     ......