下载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>