element table合併單元格

2021-09-24 14:02:01 字數 1172 閱讀 9324

在使用element table這個元件的時候,發現有些資料需要合併行,有些資料又要合併列,table自帶了span-method這個方法,可以根據需要進行單元格的合併。

getspanarr(data)  else  else }}

},objectspanmethod()

}else if(columnindex === 1)

}else if(columnindex === 2)

}else if(columnindex === 3)}},

getspanarr這個函式的作用是整合需要合併的行,假設data是需要處理的資料列表,對這個列表進行迴圈,如果是第一條先在spanarr陣列加1,並且把這個位置pos置0,如果之後的資料和上一條資料的id相同,那就在同樣的pos位置加1,同時push乙個0,代表要合併的行的數量,如果不相同,就往spanarr中新加入乙個1,同時記住位置。

這個方法需要資料已經是按id排序過的陣列,即相同id的資料相鄰。

objectspanmethod是我寫的span-method方法,因為我需要的是合併相同id的行的前4列單元格,首先判斷columnindex(列號)是多少,然後取出spanarr當前行號對應的數字,如果當前行號對應的數字是》0代表當前行存在且不需要合併,然後return,return既可以是乙個物件,也可以是乙個陣列,第乙個元素代表rowspan,第二個元素代表colspan。

這樣就可以合併行的單元格。效果類似

但是如果要合併同一行中左右的單元格,達到如下的效果

這樣需要合併同行的列,只需要控制一下想要合併的行就行

if (rowindex % 2 === 0)  else if (columnindex === 1) 

}

在行號對2取餘數未0的時候,如果列號是0,就合併第0列和第1列,同時第1列要返回[0,0],此處必須要返回第一列的合併陣列,否則table表就會多一列,因為第0列佔據的colspan是2,此外其他列佔據為1,會使**顯示不正常。

Element table元件單元格合併(縱向)

一 計算 1.html 2.對源資料進行計算 初始化合併參數列 var cols 參與合併的字段,在這裡增加即可 var loca 合併座標與數量 for var i in cols for var i 0 i pdata.rows.length i else 設定行號 for var q in l...

Element table 翻頁多選

1 所有選中的資料存到乙個陣列中 selectdataarrl 2 切換 currentpage 頁碼 或 pagesize 條數 的時候 給當前資料新增選中狀態 this.refs.multipletable.togglerowselection 3 整理需要匯出的資料 1.儲存選中的內容 sel...

單鏈表合併

某公司的面試題。兩個公升序單鏈表a,b,給定乙個節點c。不能申請其他節點情況下將a,b 按公升序排列。include include include struct link 建立鍊錶 nrandom 自由因子 ncount 鍊錶節點數目 link create const int nrandom,c...