筆者一直有個(gè)開源夢丽蝎，但是奈何時(shí)間有限、技術(shù)有限一直沒有真正的開始過膀藐，2022 年 10 月 01 日屠阻，我決定走出這一步。
在工作中额各，經(jīng)常會遇到一些表格栏笆，尤其是后臺項(xiàng)目表格更多，而既然是表格臊泰，就免不了要合并單元格蛉加。之前很多次都是每次用到的時(shí)候直接寫對應(yīng)邏輯，但是這顯然會很繁瑣缸逃，于是趁著這個(gè)機(jī)會针饥，我決定做一個(gè)用起來很方便的用于合并表格的開源庫。
思路解析
很多 UI 庫合并單元格的方式都是提供一個(gè)方式讓我們可以根據(jù)自己的需求傳遞一個(gè)方法控制某些單元格的 rowspan 或 colspan 達(dá)到合并需求需频。比如element-plus提供了 span-method 屬性丁眼，我們可以寫一個(gè)方法給坐標(biāo)（ ps：[行, 列]） 為 [0, 1] 的單元格設(shè)置 rowspan 為 2，[1, 1] 的單元格設(shè)置 rowspan 為 0昭殉，那么 [0, 1] 的單元格將占 2 行苞七，而 [1, 1] 的單元格不會渲染，效果如下：
// 代碼
const spanMethod = ({ rowIndex, columnIndex }) => {
let rowspan = 1;
let colspan = 1;
if (rowIndex === 0 && columnIndex === 1) rowspan = 2;
if (rowIndex === 1 && columnIndex === 1) rowspan = 0;
return {
rowspan,
colspan
};
};
其實(shí)這里有個(gè)很重要的點(diǎn)挪丢，那就是element-plus我們提供了當(dāng)前單元格的 rowIndex 以及 columnIndex 讓我們可以控制每一個(gè)單元格的 rowspan 以及 colspan蹂风，筆者也分析過其他一些 UI 庫，幾乎都提供了類似的方式供我們使用乾蓬。
基于上述部分的內(nèi)容筆者就在想惠啄，如果提前利用表格數(shù)據(jù)解析出一份虛擬表格，虛擬表格中每一個(gè)單元格的內(nèi)容就是渲染表格中每一個(gè)單元格的 rowspan 以及 colspan 值任内，然后利用組件庫提供的 rowIndex 以及 colIndex 在我們設(shè)置好的虛擬表格中找到每一個(gè)單元格的 rowspan 以及 colspan 就可以實(shí)現(xiàn)表格單元格合并了撵渡。
table-merge
基于上述思路，筆者開發(fā)了本文主角table-merge死嗦，已經(jīng)開源到 Github 以及 NPM趋距，并且支持多個(gè)UI框架開箱即用，會在本文最后列出越除。
例如element-plus想實(shí)現(xiàn)表格行合并节腐，只需要很少的代碼即可實(shí)現(xiàn)如下效果：
// 代碼
import tableMerge from '@table-merge/element-plus';
const data = [
{ id: 1, a: 8, b: 8, c: 2, d: 0 },
{ id: 2, a: 2, b: 4, c: 4, d: 5 },
{ id: 3, a: 8, b: 8, c: 4, d: 4 },
{ id: 4, a: 5, b: 8, c: 4, d: 1 },
{ id: 5, a: 5, b: 3, c: 3, d: 2 }
];
const columns = [
{ prop: 'id', label: 'ID', align: 'center' },
{ prop: 'a', label: 'A列', align: 'center' },
{ prop: 'b', label: 'B列', align: 'center' },
{ prop: 'c', label: 'C列', align: 'center' },
{ prop: 'd', label: 'D列', align: 'center' }
];
<el-table :data="data" :span-method="tableMerge(data)" border>
<el-table-column v-for="col in columns" :key="col.prop" v-bind="col"></el-table-column>
</el-table>
更多靈活的使用方式可以參考上述鏈接中的使用文檔靠欢。
開箱即用
最后，希望本庫可以幫助到別人铜跑！
