标签：平铺 attr data label 树形 子级 resChild children treeItem

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。