Vue -- Tree 树形控件＜el-tree＞讲解及应用实例

一、效果展示

实验室横向课题中的一个需求，做的是一个文件上传和下载的树形控件文件。要求按照阶段和任务段展示，即第一层是阶段数，第二层是任务段数，第三层是具体的文件。在文件后面有文件上传和下载的按钮。直接上图说明。

二、树形控件

基础的树形结构：

实现代码：

el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {
    data() {
      return {
        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-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

我们不难发现组件比较简单，重要的对数据的处理。按照官网给出的数据格式，数据应该也是分层给出。若后端返回的数据不是处理好的树形数据，那么前端需要按照设计自己处理数据。这次我的后端也没有给我处理好分层数据，我也是自己熬夜处理好的数据，具体处理过程都在下面的代码中，必要的已经加了注释！

先看后端返回的数据吧！

后端只返回了一个一维列表，列表中每个元素包含一个文件号apqpNo、一个文件名fileName和一个状态值state…需要把这个一维列表处理好分成三层数据，那么开始处理数据！

处理过程：

(1)新建 projectFileDate = []， 存后端返回的项目的数据信息,数据信息包含据后端返回的文件编号、文件名、状态等。

新建realMap=[] ，新建realMap存取处理的数据。realMap中有6个子map,初始化为空，分别为0-5阶段的文件数据。

取到projectFileDate 中 每个元素中的文件号apqpNo，对文件号进行处理。例子：apqp值为1.2.5时，则可以取出文件号中的三个数（1 2 5），第一个数是文件树的第一层，根据第二个数和第三个数可以确定阶段数dest（根据已经建好fileMap映射）。

        const firstDigst = projectFileDate[i].ap