element-ui中el-table的跨行，合并行計算方式

背景

在最近的一個迭代上，有一個功能點是在表格中做一個合并單元格的效果。大致如下圖

只有第一列合并行，跨行。合并的規(guī)則是縱向相鄰的連續(xù)N行，如果id一致，則合并。

看到這個需求一開始我以為很簡單，表格跨行.跨列，不就是設置rowspan 和colspan。于是我就把這個功能點放到最后來實現了。

等到真正去做的時候，查了一下element的文檔，發(fā)現并沒那么簡單。需要自己動手去寫一個方法設置每個單元格的rowspan和 colspan。 眼看要提測了，想偷懶的想借他山之石。于是在前端群里問了一下，又沒人寫過類似的，解決一下。后來想想真是多此一舉，關鍵時刻一定要相信自己。何況很久沒有遇到有意思的題目了。看起來很有趣。在前端群里得到否定答案的我，決定加班好好研究一下這個合并的規(guī)則。為他人鋪一個康莊大道。

認真研究

以下是官方提供的一個在第一列合并行的例子

objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex % 2 === 0) { return { rowspan: 2, colspan: 1, } } else { return { rowspan: 0, colspan: 0, } } } }

在el-table標簽上設置 :span-method="objectSpanMethod" 就能實現在第一列的偶數行被合并。這個例子寫的很簡單。沒有摻雜任何業(yè)務邏輯。該方法返回的數據可以是 一個包含rowspan和colspan的對象。 {rowspan: 2, colspan: 1} 表示當前單元格占用二行一列。 {rowspan: 0, colspan: 0} 表示當前單元格缺少，或被合并了。

row表示當前行。column表示當前列，rowIndex當前行的索引，columnIndex 當前列的索引。

在日常開發(fā)中，常見的合并行，或合并列的場景是根據后端返回的一個數組，依據其中的某一個屬性來合并行。比如有一個表格，統計每個人車輛的所屬情況。后端是以車輛為粒度返回數據。當一個人有多臺車時，（比如我）就需要將姓名那一列合并行。這樣做后，信息的層次和結構會更加清晰。表現得更加具體，形象。

思路實現

根據合并的規(guī)則可以知道，在我的需求中，只需要確定rowspan的值即可。也就是合并多少行，對于被合并的單元格，rowspan和colspan都為零。而合并的單元格，他的colspan為1，因為它不跨列。

于是拿到表格數據后，對表格數據進行以下處理。假設要合并的字段為runPeriod。相同的runPeriod單元格合并起來。

addSpanRows(tableData) { let pos = 0 let len = tableData.length for (let i = 0; i < len; i++) { const item = tableData[i] if (i === 0) { item.$rows = 1 pos = 0 } if (i !== 0) { if (item.runPeriod === tableData[i - 1].runPeriod) { item.$rows = 0 tableData[pos].$rows = tableData[pos].$rows + 1 } else { item.$rows = 1 pos = i } } } }

使用pos記錄出現重復的元素的索引，找到一個重復后就將索引為pos的記錄的 $rows 加1，找不到就將pos設置為當前遍歷的索引

在

spanMethod({row, _, __, columnIndex}) { if (columnIndex === 0) { return { rowspan: row.$rows, colspan: row.$rows ? 1 : 0, } } }

當時第一列時使用$rows進行合并單元格。

這樣配置一下即可。

HTML javaScript

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。