递归方法使用场景合集

函数方法

入参说明

参数名	参数说明	备注
list	待操作的树结构数据集合	示例：初始化数据，集合数组
type	操作类型	值： PROPERTIES：添加属性与属性值 SETVALUE：设置指定属性的属性值 APPOINT：返回集合中指定的数据
expandItem	expandItem	对象，含一下属性： {children: 'children', assemble: [],result: {},planeData: []}

对象属性	属性说明	备注
children	string	默认'children'，子级访问属性
assemble	array[object]	操作数组。{ attributeName: '属性名', attributeValue: '属性值' }
result	object	根据指定属性返回对象存放位置。
planeData	array	层级数据平铺返回数据存放位置。

方法

import Vue from 'vue';
const vm = new Vue();

recursionTreeList(list, type, expandItem) {
        list.forEach(element => {
            if (type === 'PROPERTIES') {
                expandItem.assemble.forEach(m => {
                    element[m.attributeName] = m.attributeValue;
                })
            }

            if (type === 'PROPERTIESVUE') {
                expandItem.assemble.forEach(m => {
                    vm.$set(element, m.attributeName, m.attributeValue);
                })
            }

            if (type === 'SETVALUE') {
                expandItem.assemble.forEach(m => {
                    element[m.attributeName] =  m.attributeValue;
                })
            }

            if (type === 'UNFOLD') {
                expandItem.planeData.push(element);
            }

            if (type === 'APPOINTATTRIBUTE') {
                if (expandItem.assemble.length === 1) {
                    expandItem.planeData.push(element[expandItem.assemble[0].attributeName]);
                } else {
                    element[expandItem.assemble[0].attributeName] === expandItem.assemble[0].attributeValue &&
                    expandItem.planeData.push(element[expandItem.assemble[1].attributeName]);
                }
            }

            if (type === 'APPOINT') {
                element[expandItem.assemble[0].attributeName] === expandItem.assemble[0].attributeValue && (expandItem.result = element);
            }

            if(type === 'CONDITIONVALUE') {
                element[expandItem.assemble[0].attributeName] === expandItem.assemble[0].attributeValue 
                && (element[expandItem.assemble[1].attributeName] = expandItem.assemble[1].attributeValue) 
            }

            if (element[expandItem.children] && element[expandItem.children].length) {
                this.recursionTreeList(element[expandItem.children], type, expandItem);
            }
});

初始化操作数据

let dl =[
  {
    id: 1,
    componentName: '11',
    children: []
  },
  {
    id: 2,
    componentName: '22',
    children: [
      {
        id: 22,
        componentName: '22-1',
        children: []
      },
      {
        id: 23,
        componentName: '22-2',
        children: []
      }
  	]
  },
  {
    id: 3,
    componentName: '33',
    children: []
  }
]

使用场景1：为集合数据添加checked和age属性，且初始值为false和12。PROPERTIESVUE是对在data()中定义的数据进行属性添加。

使用
this.recursionTreeList(dl, 'PROPERTIESVUE', {
  children: 'children',
  assemble: [
    { attributeName: 'checked', attributeValue: false },
    { attributeName: 'age', attributeValue: 12 }
  ],
  result: {}
})

this.recursionTreeList(dl, 'PROPERTIES', {
  children: 'children',
  assemble: [
    { attributeName: 'checked', attributeValue: false },
    { attributeName: 'age', attributeValue: 12 }
  ],
  result: {}
})

结果
[{"id":1,"componentName":"11","children":[],"checked":false,"age":12},{"id":2,"componentName":"22","children":[{"id":22,"componentName":"22-1","children":[],"checked":false,"age":12},{"id":23,"componentName":"22-2","children":[],"checked":false,"age":12}],"checked":false,"age":12},{"id":3,"componentName":"33","children":[],"checked":false,"age":12}]

使用场景2：设置集合数据中的checked属性值为true。

使用
this.recursionTreeList(dl, 'SETVALUE', {
  children: 'children',
  assemble: [
  	{ attributeName: 'checked', attributeValue: true }
  ],
  result: {}
})

结果
[{"id":1,"componentName":"11","children":[],"checked":true,"age":12},{"id":2,"componentName":"22","children":[{"id":22,"componentName":"22-1","children":[],"checked":true,"age":12},{"id":23,"componentName":"22-2","children":[],"checked":true,"age":12}],"checked":true,"age":12},{"id":3,"componentName":"33","children":[],"checked":true,"age":12}]

使用场景3：获取ID为3的数据，返回数据位置为expandItem.result。

使用
let expandItem = {
  children: 'children',
  assemble: [
  { attributeName: 'id', attributeValue: 3 }
  ],
  result: {}
}
this.recursionTreeList(dl, 'APPOINT', expandItem)

结果
{"children":"children","assemble":[{"attributeName":"id","attributeValue":3}],"result":{"id":3,"componentName":"33","children":[]}}

使用场景4：将层级数据平铺返回。

使用
let expandItem = {
  children: 'children',
  assemble: [],
  result: {},
  planeData: []
}
this.recursionTreeList(dl, 'UNFOLD', expandItem)

结果
{"children":"children","assemble":[],"result":{},"planeData":[{"id":1,"componentName":"11","children":[]},{"id":2,"componentName":"22","children":[{"id":22,"componentName":"22-1","children":[]},{"id":23,"componentName":"22-2","children":[]}]},{"id":22,"componentName":"22-1","children":[]},{"id":23,"componentName":"22-2","children":[]},{"id":3,"componentName":"33","children":[]}]}

使用场景5：通常用于抽取集合中指定属性的集合数据。如获取选中的对象数据里的ID值。

    使用
    let expandItem = {
      children: 'children',
      assemble: [{ attributeName: 'id', attributeValue: null }],
      result: {},
      planeData: []
    }
    this.recursionTreeList(dl, 'APPOINTATTRIBUTE', expandItem)
    
    结果 => expandItem
    {"children":"children","assemble":[{"attributeName":"id","attributeValue":null}],"result":{},"planeData":[1,2,22,23,3]}

使用场景6：根据要求条件的成立，将指定属性统一赋值。如：将id=3的数据的componentName更改为'赋值此数据'。

    使用
    let expandItem = {
      children: 'children',
      assemble: [
      	{ attributeName: 'id', attributeValue: 3 },
      	{ attributeName: 'componentName', attributeValue: '赋值此数据' },
      ],
      result: {},
      planeData: []
    }
    this.recursionTreeList(dl, 'APPOINTATTRIBUTE', expandItem)
    
    结果 => dl
    [{"id":1,"componentName":"11","children":[]},{"id":2,"componentName":"22","children":[{"id":22,"componentName":"22-1","children":[]},{"id":23,"componentName":"22-2","children":[]}]},{"id":3,"componentName":"赋值此数据","children":[]}]