记录一下，把tree中的部分数据剔除

 

 

<script setup lang="ts">
import { js_beautify as beautify } from "js-beautify";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";

const tree = ref([
  {
    name: "第一层",
    score: 44,
    children: [
      {
        name: "第二层",
        score: 9,
        children: [
          {
            name: "第三层",
            score: 6,
          },
          {
            name: "第三层",
            score: 3,
          },
          {
            name: "第三层",
            score: 10,
          },
          {
            name: "第三层",
            score: 11,
          },
        ],
      },
      {
        name: "第二层",
        score: 5,
      },
      {
        name: "第二层",
        score: 30,
        children: [
          {
            name: "第三层",
            score: 15,
          },
          {
            name: "第三层",
            score: 11,
          },
          {
            name: "第三层",
            score: 15,
          },
        ],
      },
    ],
  },
]);

const deep = (list = [], parent = null) => {
  let total = 0;
  let index = list.length - 1;
  while (index >= 0) {
    const item = list[index];
    if (item && item.children) {
      deep(item.children, item);
    }
    if (item.score < 10) {
      list.splice(index, 1);
    } else {
      total += item.score;
    }

    index--;
  }

  if (parent) {
    parent.score = total;
  }
};

deep(tree.value, null);

const treeDataJson = computed(() => {
  const options = {
    indent_size: 4,
    space_in_empty_paren: true,
    preserve_newlines: false,
    brace_style: "expand",
  };
  return beautify(JSON.stringify(tree.value), options);
});

onMounted(() => {
  hljs.highlightAll();
});
</script>

<template>
  <div style="height: 100%; overflow-y: auto; width: 100%">
    <pre><code class="language-javascript"> {{ treeDataJson }}</code></pre>
  </div>
</template>

<style scoped lang="scss"></style>

 

剔除后的结果