(注:本篇博客中一些地方寫的不是很好,lecode.ltd中已修改)
在使用element-ui 的表格式涉及到了單元格合並問題,實際工作中數據多是從后台獲取的,很顯然數據不是一成不變的,所以就要根據數據的變化動態的合並單元格,
動態動態動態,我TM不會啊~。~,嘗試合並一直出現這樣那樣的問題,不會還這么多借口~~渣渣~~
去問了下度娘,發現類似問題不是很多,這特么不正常啊,果然是我太渣o(╥﹏╥)o ,但總算找到兩個總結記錄下吧,萬一忘了~~~~
好了,切入正題:
問題場景:
例如一個時間段下對應多行數據,這就不免就涉及到了單元格合並
單元格合並主要思路大致為:
1. 為每一個時間段下的 每一行 數據中都添加上對應的時間段數據
2. 設定一個數組來存放要合並的格數,同時還要設定一個變量來記錄,當時間段不同時數據的索引
3. 遍歷表格數據
貼代碼:
1. data綁定的為表格數據、span-method綁定的為合並單元格的方法
2. 遍歷表格數據 最終輸出的結果為 spanArr = [3, 0, 0, 2, 0, 0......]的形式,3代表當前單元格合並多少行, 0代表不合
合並完單元格鼠標放上去的高亮顯示問題:
問題場景:合並完單元格后,假定此時某個時間段對應的多行數據,鼠標放上其中的某一行時,只是該行高亮顯示,而不是高亮顯示所有行(所有要解決下)
修改完要達到的效果: (這樣是不是清晰些了~~||~~)
代碼:
1. 綁定element-ui里的鼠標進入和離開單元格的方法
2. 遍歷表格數據,為每一條數據添加一個index屬性用來標識每行數據,最后輸出結果格式為 sameRowArr = [[0, 1, 2, 3], [4, 5, 6], [7, 8, 9],......]
sameRowArr中的每一項代表,在一個條件下的數據(如一個時間段等),代碼中的sIdx是用來控制數組的下標,條件變化sIdx +1
3.最后是實現效果的代碼(鼠標移上及移除即可實現動態添加及移除類名) (row_class為在style標簽內定義的css樣式)
此處關鍵點為:a. 在cellMouseEnter事件里 遍歷sameRowArr,
b. 參數row里包含該整行數據,使用該行中實現存好的索引,在sameRowArr中的每一項里搜索,
c. 存在即將sameRowArr的子數組賦值給一個全局數據curRowArr,
d. 再在tableRowClassName方法中,循環curRowArr數組
e. 行號與子數組中存的行數相同即為該行添加一個類名
(所以相同條件下的多行數據都會被添加上相同類名,即可解決高亮顯示不全問題)
已實踐~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~完18:26:00