如何计算数组子级的深度 - Vue.js

Question

我希望计算深度方法能够正确计算深度，而是反向计算，将第一个元素分配为深度 2，第二个元素分配为深度 1，第三个元素分配为深度 0，也许我需要创建一个新方法接收revisionData然后逐项查看。并且不会因任何原因计算大于 2 的深度。

<template>
      <acc-data-table-v2
            :data="revisionData"
            :columns="columns"
            primaryColumn="id"
            treeRowKey="id"
            row-key="id"
            :treeProps="{children: 'children'}"
            :row-class-name="tableRowClassName"
            >

            <template v-slot:subflowsRevisionsDescriptionTemplate="slotProps">
                <div>
                        <div :style="{ marginLeft: calculateMarginLeft(calculateDepth(slotProps.scope.row)) }">
                            <div v-if="slotProps.scope.row.step_id">
                                {{ slotProps.scope.row.step.description }} 
                            </div>
                            <div v-if="!slotProps.scope.row.step_id">
                                {{ slotProps.scope.row.description }} 
                            </div>
                        </div>
                </div>
            </template>
      </acc-data-table-v2>
</template>


<script>
export default {
  data() {
    return {
      revisionData: [
        {
          id: 1, //depth: 0
          name: 'Parent 1',
          children: [
            {
              id: 11, //depth: 1
              name: 'Child 1.1',
              children: [
                {
                  id: 111, //depth: 2
                  name: 'Grandchild 1.1.1'
                },
              ]
            },
            {
              id: 12, //depth: 1
              name: 'Child 1.2'
            }
          ]
        },
        {
          id: 2, //depth:0
          name: 'Parent 2',
          children: [
            {
              id: 21, //depth: 1
              name: 'Child 2.1'
            }
          ]
        }
      ]
    };
  },
  methods: {
        calculateMarginLeft(depth) {
            const marginLeft = depth * 12 + 'px';
            return marginLeft;
        },
        calculateDepth(item) {
            let depth = 0;
            let parent = item;
            while (parent.children && parent.children.length > 0) {
                depth++;
                parent = parent.children[0];
            }
            return depth;
        },
  }
};
</script>

Answer 1

这是一个非常简单的递归函数：

迭代数组并为每个元素分配当前深度。如果一个元素有子元素，则以增加的深度递归调用该函数。最大深度是任何子级的最大深度。

function calcDepth(array, d) {
  let maxDepth = d;
  for (let elem of array) {
    elem.depth = d;
    if (elem.children?.length)
      maxDepth = Math.max(maxDepth, calcDepth(elem.children, d + 1));
  }
  return maxDepth;
}

let test = [ 
  { 
    id: "1", 
    children: [
      { 
        id: "1.1", 
        children: []
       }
    ]
  },
{ 
    id: "2", 
    children: [
      { 
        id: "2.1", 
        children: [
          {
            id: "2.1.1"
          }
        ]
       }
    ]
  }  
];

let max = calcDepth(test,0);
console.log(test);
console.log("MaxDepth: ", max);

Answer 2

好的，你可以尝试稍微修改一下代码

calculateDepth(item) {
  let depth = 0;
  let parent = item;
  // if there is no parent or any parent doesnt have child elemen`
  while (parent && parent.children && parent.children.length > 0) {
    depth++;
    parent = parent.children[0]; //  first child
  }
  return depth;
}

之后还根据深度因子计算剩余的边距

calculateMarginLeft(depth) {
  const marginLeft = depth * 12 + 'px';
  return marginLeft;
}

我认为应该有效！