根据获取的json文件，展示文件目录结构

　　

下载js代码地址  js代码地址 代码如下图所示

 

　　展示结果如图，对比两个文件夹的目录文件和大小，文件夹下的子文件夹会显示出退格的效果，以便区分父子文件目录；

由于文件目录较多，js文件目录信息相似，所以使用了递归的方法。

展示出来的文件夹和子文件要显示出退格的效果，所以循环的时候记录自己的层级index

let version1 = data["4.0.0.6006"][0];
let version2 = data["4.0.0.1846"][0];


let data_v1 = version1.dirs;
let data_v2 = version2.dirs;

all_file = get_file(data_v1, data_v2, 0);

function get_file(data_v1, data_v2, index) {
    index++;

    let arr = [];
    data_v1 = data_v1 || [];
    data_v2 = data_v2 || [];

    let len_ = max_len(data_v1, data_v2);

    for (var i = 0; i < len_; i++) {

        var item1 = data_v1[i] || {};
        var item2 = data_v2[i] || {};

        if (is_folder(item1) && is_folder(item2)) {

            var obj = {};
            obj.index = index;
            obj.type = 'folder';
            obj.v1 = 'v1';
            obj.v2 = 'v2';
            obj.v1_name = item1['dir_name'];
            obj.v2_name = item2['dir_name'];
            obj.v1_file_cnt = item1['file_cnt'];
            obj.v2_file_cnt = item2['file_cnt'];
            obj.v1_size = item1['size'];
            obj.v2_size = item2['size'];
            arr.push(obj);

            if (has_dirs(item1) || has_dirs(item2)) {
                arr = arr.concat(get_file(item1.dirs, item2.dirs, index));
            }

            arr = arr.concat(_file(item1.files, item2.files, index));


        } else if (is_folder(item1) || is_folder(item2)) {

            if (is_folder(item1)) {

                var obj = {};
                obj.index = index;
                obj.type = 'folder';
                obj.v1 = 'v1';
                obj.v2 = 'v2';
                obj.v1_name = item1['dir_name'];
                obj.v2_name = '';
                obj.v1_file_cnt = item1['file_cnt'];
                obj.v2_file_cnt = '';
                obj.v1_size = item1['size'];
                obj.v2_size = '';
                arr.push(obj);

            } else {

                var obj = {};
                obj.index = index;
                obj.type = 'folder';
                obj.v1 = 'v1';
                obj.v2 = 'v2';
                obj.v1_name = '';
                obj.v2_name = item2['dir_name'];
                obj.v1_file_cnt = '';
                obj.v2_file_cnt = item2['file_cnt'];
                obj.v1_size = '';
                obj.v2_size = item2['size'];
                arr.push(obj);
            }

            if (has_dirs(item1) || has_dirs(item2)) {

                arr = arr.concat(get_file(item1.dirs, item2.dirs, index));
            }
            arr = arr.concat(_file(item1.files, item2.files, index));
        } else if (!is_folder(item1) || !is_folder(item2)) {
            arr = arr.concat(_file(item1.files, item2.files, index));

        }
    }
    return arr;

}

function _file(data1, data2, index) {
    index++;
    data1 = data1 || [];
    data2 = data2 || [];
    let len = max_len(data1, data2);

    var file_arr = [];
    for (var i = 0; i < len; i++) {
        var file1 = data1[i] || {};
        var file2 = data2[i] || {};
        var obj = {};
        obj.index = index;
        obj.type = 'file';
        obj.v1 = 'v1';
        obj.v2 = 'v2';
        obj.v1_name = file1['file_name'] || '';
        obj.v2_name = file2['file_name'] || '';
        obj.v1_size = file1['size'] || '';
        obj.v2_size = file2['size'] || '';
        file_arr.push(obj)

    }
    return file_arr;
}

function max_len(data1, data2) {
    let len1 = data1.length;
    let len2 = data2.length;

    return len1 > len2 ? len1 : len2;
}

function is_folder(file) {
    return file.hasOwnProperty('dir_name');
}

function has_dirs(data) {
    return data.hasOwnProperty('dirs')
}

 

 

vue代码

　　　　　　　　<table class="table_border">
                    <thead>
                        
                        <tr>
                            <th></th>
                            <th colspan="2">v1</th>
                            <th colspan="2">v2</th>
                            <th colspan="2">v1-v2</th>
                        </tr>
                        <tr>
                            <th>文件夹/文件</th>
                            <th>文件数量</th>
                            <th>文件size</th>
                            <th>文件数量</th>
                            <th>文件size</th>
                            <th>文件数量</th>
                            <th>文件size</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in all_file">
                            <template v-if="item.type=='folder'">
                                
                                <td :style="{'paddingLeft': parseInt(20*item._index) + 'px' }"><i class="icon_folder icon iconfont icon-folder"></i>{{ item.v1_name|| item.v2_name}}</td>
                                <td>{{item.v1_file_cnt}}</td>
                                <td>{{item.v1_size}}</td>
                                <td>{{item.v2_file_cnt}}</td>
                                <td>{{item.v2_size}}</td>
                                <td>{{getdiff(item.v1_file_cnt , item.v2_file_cnt)}}</td>
                                <td :d="item.v1_size + '-' + item.v2_size">{{getdiff(item.v1_size , item.v2_size)}}</td>
                            </template>
                            <template v-if="item.type=='file'">
                                
                                <td :style="{'paddingLeft': parseInt(20*item._index) + 'px' }"><i class="icon iconfont icon-file"></i>{{ item.v1_name|| item.v2_name}}</td>
                                <td>{{item.v1_file_cnt}}</td>
                                <td>{{item.v1_size}}</td>
                                <td></td>
                                <td>{{item.v2_size}}</td>
                                <td></td>
                                <td :d="item.v1_size + '-' + item.v2_size">{{getdiff(item.v1_size , item.v2_size)}}</td>
                            </template>
                        </tr>
                    </tbody>
                  </table>