树形结构子级长度为1时平铺

1、需求说明

在使用elementUI2.0+版本的树形组件的时候，在展现上并不那么灵活，全部展开的时候，会占用太长的空间。所以，当树的各级子级只有一个的时候，可以将节点平铺，超过1个的时候，则仍然按照树形展示。

2、代码实现

涉及到树，肯定得用到递归了，递归平时用的比较少，这次写的时候没有那么如鱼得水，调试了几次才好。这里记录一下，好好理解一下，下次遇到就会容易啦。（只为成功找方法，不为失败找借口。不需要去想为什么简单的一个递归要调较多时间，只需要想清楚最终成功是因为什么，脑子里装不下太多的东西是不是记录下来比较好。）

以下是一个完整的demo，关键的转化方法是treeToFlat

<template>
  <div>
    <el-tree :data="data" :props="defaultProps" :default-expand-all="true" @node-click="handleNodeClick"></el-tree>
    <el-divider></el-divider>
    <el-tree :data="flatedData" :props="defaultProps" :default-expand-all="true" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flatedData: [],
      data: [
        {
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }, {
            label: '三级 3-1-2'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  created() {
    this.flatedData = this.treeToFlat(this.data, 'label');
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    // 树形结构子级长度为1时平铺
    treeToFlat(res, attr = 'name') {
      let tree = [];

      res.forEach(resItem => {
        const { children, ...others } = resItem;

        let treeItem = { ...others };

        if (children && children.length) {
          // 1 有子级时，递归
          const resChild = this.treeToFlat(children, attr);
          if (resChild.length === 1) {
            // 递归后，结果的长度为1，与父级连接实现平铺
            treeItem.id = resChild[0].id;
            treeItem[attr] = `${others[attr]}-${resChild[0][attr]}`;
            // children 属性别忘了加上
            treeItem.children = resChild[0].children;
          }
          else if (resChild.length > 1) {
            // 递归后，结果的长度大于1时，直接按树形展示，即直接把children属性加上即可
            treeItem.children = resChild;
          }
        }
        // 2 将处理完的结果push到新数组中
        tree.push(treeItem);
      });

      return tree;
    },
  }
};
</script>

3、效果展示

标签：平铺,attr,data,label,树形,子级,resChild,children,treeItem
来源： https://www.cnblogs.com/chaoyueqi/p/16311701.html