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

一、效果展示

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

Vue -- Tree 树形控件<el-tree>讲解及应用实例_第1张图片

二、树形控件

基础的树形结构:

Vue -- Tree 树形控件<el-tree>讲解及应用实例_第2张图片

实现代码:

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


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

先看后端返回的数据吧!

Vue -- Tree 树形控件<el-tree>讲解及应用实例_第3张图片

后端只返回了一个一维列表,列表中每个元素包含一个文件号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].apqpNo
        const fileId = firstDigst.split('.') // 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'
        }
        // 每一个叶子文件属于一个 串联节点(映射关系定义在 .mapMatrix.js)
        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。

下面是具体的实现代码




你可能感兴趣的:(前端,html,vue.js,前端,elementui)