vue中樹狀結構轉行資料，並渲染成table的方法

場景： 我們現在有乙個樹狀結構的資料，如下圖：

大概的資料結構如下：

const tree =]}

]}......]}
]}

ok，下面我們一一進行解析。

第一步，遞迴樹狀結構，轉化為行資料

parsetreetorow

(node, data =
, row =
)else
;this
.parsetreetorow
(child, data,
[...row, cell]);
}}return data;};
//通過上面的遞迴函式，解析出來的行資料如下：
const data =[[
,,,]
,[,,
,],[
,,,]
,[,,
,],[
,,,]
,...
...]
;

此時，很明顯渲染出來的table並沒有進行合併，如果對解析後的行資料二次解析亦可找到其rowspan，這裡不做二次解析，我們回到上面的遞迴函式中，做如下處理：

parsetreetorow

(node, data =
, row =
)else
;this
.parsetreetorow
(child, data,
[...row, cell]);
}}return data;};
/** 1. 計算某個節點下葉子節點的數量
2. @param node 節點
3. @returns leafcount 葉子節點的數量
*/computeleafcount
(node)
else
node.rowspan = leafcount;
return leafcount;}}
//解析出的資料如下：
const data =[[
,,,]
,[,,
,],[
,,,]
,[,,
,],[
,,,]
,...
...]
;

第三步，處理異常合併資訊

回到遞迴函式中，

parsetreetorow

(node, data =
, row =
)else
;/******************新增的********************/
//深度轉殖父親，因為後代共用了該引用資料
const extendrow =
[...
json
.parse
(json
.stringify
(row)
), cell];if
(extendrow.length ===1)
else
if(extendrow.length >1)
/******************新增的********************/
this
.parsetreetorow
(child, data, extendrow);}
}return data;};
//解析後的資料結構如下：
const data =[[
,,,]
,[,,
,],[
,,,]
,[,,
,],[
,,,]
,...
...]
;

>

v-for
="(row, i) in data"
:key
="i"
>
v-for
="(cell, j) in row"
v-if
="cell.rowspan"
:key
="j"
:rowspan
="cell.rowspan"
:colspan
="cell.colspan"
>
class
="cell"
>
}div
>
td>
tr>
table
>
大功告成！最後的效果如下：
資料庫中樹狀資料結構的設計
img img 乙個cms頻道分類設計,大體意思是通過自定義id的方式。id 步長 2位 那麼一級分類為 01 99 varchar 20 2 10 那麼id 01 99999999999999999999 如果你覺得分類不夠用的可以加大步長,級次關係 img quote select schann...
對vue中的data進行資料初始化
this.data 是表示當前的改變後的this中的資料 this.options.data 是表示沒有賦值前的this中的資料,表示 初始化的data 一般可以使用object.assign this.data,this.options.data 來對data中的資料進行初始化操作。如果data中...
多執行緒中submit方法執行資料並返回值
今天在寫多執行緒時想要執行完之後把處理結果返回回來,就想到了之前看的執行緒池中submit方法中new乙個callable傳進去,具體實現為 threadpoolexecutor threadpoolexecutor newthreadpoolexecutor 4 4,2 timeunit.seco...