Element-UI中單元格合並問題


本篇博客已遷移到lecode.ltd

(注:本篇博客中一些地方寫的不是很好,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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM