2023年6月22日发(作者：)

Vue--Tree树形控件＜el-tree＞讲解及应⽤实例⼀、效果展⽰实验室横向课题中的⼀个需求，做的是⼀个⽂件上传和下载的树形控件⽂件。要求按照阶段和任务段展⽰，即第⼀层是阶段数，第⼆层是任务段数，第三层是具体的⽂件。在⽂件后⾯有⽂件上传和下载的按钮。直接上图说明。⼆、树形控件基础的树形结构：实现代码：el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">我们不难发现组件⽐较简单，重要的对数据的处理。按照官⽹给出的数据格式，数据应该也是分层给出。若后端返回的数据不是处理好的树形数据，那么前端需要按照设计⾃⼰处理数据。这次我的后端也没有给我处理好分层数据，我也是⾃⼰熬夜处理好的数据，具体处理过程都在下⾯的代码中，必要的已经加了注释！先看后端返回的数据吧！后端只返回了⼀个⼀维列表，列表中每个元素包含⼀个⽂件号apqpNo、⼀个⽂件名fileName和⼀个状态值state…需要把这个⼀维列表处理好分成三层数据，那么开始处理数据！处理过程：(1)新建 projectFileDate = []， 存后端返回的项⽬的数据信息,数据信息包含据后端返回的⽂件编号、⽂件名、状态等。新建realMap=[] ，新建realMap存取处理的数据。realMap中有6个⼦map,初始化为空，分别为0-5阶段的⽂件数据。取到projectFileDate 中 每个元素中的⽂件号apqpNo，对⽂件号进⾏处理。例⼦：apqp值为1.2.5时，则可以取出⽂件号中的三个数（12 5），第⼀个数是⽂件树的第⼀层，根据第⼆个数和第三个数可以确定阶段数dest（根据已经建好fileMap映射）。 const firstDigst = projectFileDate[i].apqpNo const fileId = ('.') // id: 9.2.1 // 分割字符串 fileId = ["9", "2", "1"] var matrix_i = fileId[0] const matrix_j = fileId[1] const matrix_k = fileId[2] // 因第0阶段数据库中的主id为9，故改为0 if (matrix_i == = '9') { matrix_i = '0' } // 每⼀个叶⼦⽂件属于⼀个 串联节点(映射关系定义在 .) const dest = matrix[matrix_i][matrix_j][matrix_k] if (realMap[matrix_i][dest] == = undefined) { // eslint-disable-next-line no-array-constructor realMap[matrix_i][dest] = new Array() }遍历projectFileDate，把projectFileDate中的每个元素push进realMap[matrix_i][dest]中，得到的real即为处理好的⽂件数据。(2)对realMap处理成分层的树的数据。遍历realmap，在⼀层循环中加上两个属性值：label和chiledren[].其中label为确定的⽂件数据第⼏阶段数。curLabel保存realMap[i]值，对curLabel进⾏添加两个元素，同样是label和chiledren[].其中label为确定的⽂件数据第⼏任务段数。finalChild保存realMap[i][j]值，对finalChild进⾏添加三个元素，label、status和id.其中label为确定的⽂件名称。各层保存完依次push进⽗层，最中得到已建⽴好的树的数据finalFileTree。下⾯是具体的实现代码