javascript通过递归改子节点数据-用于层级深度未知的树形结构

最近在做这么个需求：树形结构，层级深度未知，一旦某个节点的状态是置灰的话，其所有子节点都要置灰。

方案一(数据库有值)：如果数据库里置灰节点的所有子节点，值也都是"置灰"，那后台取数据时就会拿到这个字段，前台直接用就可以；

方案二(后台手动赋值)：如果后台在构建JSON数据的时候，把置灰节点的所有子节点都手动添加这个字段，前台也可以直接用；

方案三(前台手动赋值)：如果后台接口返回给前台的出参里，置灰节点的子节点都没标这个字段值，只能前台手动添加。以Vue+ElementUI为例，代码如下：

<template>

  <div class="mainPage">

        <el-tree :data="dataDealwith" :props="defaultProps">

          <span class="custom-tree-node" slot-scope="{ node, data }">

            <span :class="data.statusIsIncorrect == 'yes' ? 'ccfont1' : ''">{{ node.label }}</span>

          </span>

        </el-tree>

  </div>

</template>

<script>

export default {

  computed: {

    dataDealwith(){

      var data = this.data;

      function setGrayNode(data){ //遍历树  获取id数组

        for(var i=0;i<data.length;i++){

          if(data[i].statusIsIncorrect == 'yes'){// 如果某一个节点是禁用的，它的所有子节点都应该禁用

            setChildrenGray(data[i].children)//子节点传给另一个函数专门用来改数据

            continue;

          } else {

            if(data[i].children){// 如果当前节点有子节点，就递归调用一次

              setGrayNode(data[i].children);

            }

          }

        }

      }

      function setChildrenGray(data){

        for(var n=0;n<data.length;n++){

          data[n].statusIsIncorrect = 'yes';// 子节点先置灰

          if(data[n].children && data[n].children.length > 0){

            setChildrenGray(data[n].children)

          }

        }

      }

      setGrayNode(data)

      return data;

    }

  },

  data() {

    return {

      data: [

        {

          label: "一级 1",

          id: "1",

          children: [

            {

              label: "二级 1-1",

              id: "1.1",

              children: [

                {

                  label: "三级 1-1-1",

                  id: "1.1.1"

                }

              ]

            }

          ]

        },

        {

          label: "一级 2",

          id: "2",

              statusIsIncorrect: 'yes',

          children: [

            {

              label: "二级 2-1",

              id: "2.1",

              children: [

                {

                  label: "三级 2-1-1",

                  id: "2.1.1"

                }

              ]

            },

            {

              label: "二级 2-2",

              id: "2.2",

              children: [

                {

                  label: "三级 2-2-1",

                  id: "2.2.1"

                }

              ]

            }

          ]

        },

        {

          label: "一级 3",

          id: "3",

          children: [

            {

              label: "二级 3-1",

              id: "3.1",

              children: [

                {

                  label: "三级 3-1-1",

                  id: "3.1.1"

                }

              ]

            },

            {

              label: "二级 3-2",

              id: "3.2",

              children: [

                {

                  label: "三级 3-2-1",

                  id: "3.2.1"

                }

              ]

            }

          ]

        }

      ],

      defaultProps: {

        children: "children",

        label: "label"

      },

    };

  },

};

</script>

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

.mainPage {

  padding: 20px;

  color: #000;

  .el-tree {

    margin-top: 10px;

    font-size: 18px;

    .ccfont1 {color: #aaa;}

  }

}

</style>