如題，公司業(yè)務(wù)需求，數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜，需要在一張表內(nèi)實(shí)現(xiàn)多級(jí)樹(shù)狀數(shù)據(jù)展示及同屬性的單元格合并，并在表格內(nèi)實(shí)現(xiàn)增刪改操作。
網(wǎng)上翻閱了很多實(shí)例，沒(méi)有能解決所有需求的案例，于是自己實(shí)現(xiàn)了一套。
時(shí)間匆忙，邏輯有優(yōu)化的地方還請(qǐng)無(wú)償指出！
最終效果如下
圖上，編碼有父子層級(jí)，每個(gè)編碼可包含多個(gè)交付階段，每個(gè)交付階段可包含多個(gè)文件，每個(gè)文件可添加不同文檔項(xiàng)次
實(shí)現(xiàn)總結(jié)如下
一. 結(jié)構(gòu)調(diào)整
首先跟后臺(tái)確認(rèn)了數(shù)據(jù)結(jié)構(gòu)，根據(jù)右側(cè)最詳細(xì)內(nèi)容為基準(zhǔn)，以單層數(shù)組返回（以編碼樹(shù)級(jí)返回更好）。獲取到數(shù)據(jù)后封裝為樹(shù)級(jí)數(shù)據(jù)。保證最詳細(xì)處表格每一行都對(duì)應(yīng)一條數(shù)據(jù)。如圖示，忽略為展開(kāi)子級(jí)數(shù)據(jù)，則圖上一共對(duì)應(yīng)七條數(shù)據(jù)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-622872.html
其中，每個(gè)數(shù)據(jù)對(duì)象帶有三個(gè)屬性：code_cnt（每條編碼下對(duì)應(yīng)的第三部分行數(shù)）、stage_cnt（每個(gè)編碼下的交付階段對(duì)應(yīng)的第三部分行數(shù)）、file_cnt（每個(gè)文件對(duì)應(yīng)的第三部分行數(shù)）。后面用于表格合并。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-622872.html
- 封裝完數(shù)據(jù)或直接獲取到父子層級(jí)后，因存在多條數(shù)據(jù)同一編碼，每條數(shù)據(jù)下都有相同children數(shù)據(jù)存在，所以需刪除多余children，保留一條。又因展開(kāi)時(shí)需展示在相同編碼下方，所以需保存相同編碼最后一條數(shù)據(jù)的children字段。如圖上所示，X-R1.1.4編碼有三條數(shù)據(jù)，應(yīng)只保留項(xiàng)次編碼為-D3.2.2的children數(shù)據(jù)，以保證點(diǎn)擊展開(kāi)子級(jí)時(shí)子層級(jí)展示在三條數(shù)據(jù)下方。
// 當(dāng)同一編碼多條數(shù)據(jù)且有children時(shí)，保留最后一級(jí)children
deleteChildren(data) {
for (let i = 0; i < data.length; i++) {
if (data[i].children && data[i].children.length) {
data[i].hasChild = true; // 后續(xù)解釋
if ( data.some( (item, index) => index > i && item.code_id === data[i].code_id ) ) {
delete data[i].children;
} else {
data[i].children = this.deleteChildren(data[i].children);
}
}
}
return data;
}
- 因相同編碼、相同階段、相同文件需合并，所以需要遞歸標(biāo)識(shí)出每個(gè)相同編碼、階段、文件的首條數(shù)據(jù)，以滿足后續(xù)單元格合并需求。
// 單元格需合并時(shí)，標(biāo)記首條數(shù)據(jù)
dealDataBefore(data) {
let id = "", stage = "", file = "";
for (let i = 0; i < data.length; i++) {
if (!id || id !== data[i].interface_item_code) {
// 第一條
id = data[i].interface_item_code;
data[i].isFirstLine = true; // 標(biāo)識(shí)編碼首條數(shù)據(jù)
stage = data[i].stage_keyid;
data[i].isFirstStage = true; // 標(biāo)識(shí)階段首條數(shù)據(jù)
file = data[i].deliver_file_template_id;
data[i].isFirstFile = true; // 標(biāo)識(shí)文件首條數(shù)據(jù)
} else {
if (!stage || stage !== data[i].stage_keyid) {
stage = data[i].stage_keyid;
data[i].isFirstStage = true;
file = data[i].deliver_file_template_id;
data[i].isFirstFile = true;
} else {
if (!file || file !== data[i].deliver_file_template_id) {
file = data[i].deliver_file_template_id;
data[i]到了這里，關(guān)于基于element-ui的table實(shí)現(xiàn)樹(shù)級(jí)表格操作及單元格合并的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
