在之前的項(xiàng)目中，我接到一個(gè)需求，需要一個(gè)類似excel的表格合并和拆分的需求。
目前我自己初步實(shí)現(xiàn)是這樣子的

我們的項(xiàng)目是前后分離的，后端用的是.net，前端用的是vue，得到這個(gè)需求之后，我的第一反應(yīng)是網(wǎng)上找找能不能找到類似的功能代碼，但是很可惜的是我并沒有找到。所以只能自己嘗試著寫

思前想后，只能從table的數(shù)據(jù)結(jié)構(gòu)入手，所以我就嘗試著寫一個(gè)table的數(shù)據(jù)結(jié)構(gòu)，然后vue的table在element中有固定的模板，我們之前都是用這個(gè)直接套用的，現(xiàn)在我發(fā)現(xiàn)用這個(gè)很難實(shí)現(xiàn)這個(gè)需求，所以又只能自己用原生的<table>、<tr>、<td>的colspan和rowspan來實(shí)現(xiàn)。

這里首先，要感謝我的前端大佬同事，是這位大佬幫我實(shí)現(xiàn)了如此復(fù)雜的需求邏輯
（ps 真實(shí)項(xiàng)目中比我這里寫的復(fù)雜很多哦~~）

首先，先定義table的數(shù)據(jù)結(jié)構(gòu)，根據(jù)渲染格式我是寫了一個(gè)方法里面來設(shè)置table的數(shù)據(jù)結(jié)構(gòu)


走到這一步的時(shí)候，我們已經(jīng)實(shí)現(xiàn)了最基礎(chǔ)的table表格了

剩下的，我們需要在每一個(gè)單元格后面加一個(gè)按鈕來實(shí)現(xiàn)合并、拆分的需求，這里我就直接用了elelment里面的組件（https://element.eleme.cn/#/zh-CN/component/installation）

我們仿照組件里面的demo寫法復(fù)制過來稍加修改

到了這一步，我們的全部外觀展示以及完成了

下面我們要開始最難的部分看了，實(shí)現(xiàn)拆分、合并的代碼需求。
我們在<el-dropdown>組面里面的@command="handleCommand"方法里面寫上面的定義的不同方法。

handleCommand(val) {//定位行列let trIndex = val.pIndex;let tdIndex = val.cellObject.index;// 行數(shù)據(jù)let trObject = this.trData[trIndex].child;// 列數(shù)據(jù)let tdObject = this.trData[val.pIndex].child[tdIndex];// 向后合并if (val.type == "afterMerge") {// 最后一個(gè)單元格不給向后合并if (tdIndex == this.trData[trIndex].child.length - 1) {this.$message({message: "此單元格后無可合并的項(xiàng)",type: "warning"});return false;}if (tdObject.occupyRow != trObject[tdIndex + 1].occupyRow) {this.$message.warning("格式不同不能合并");return false;} else {// 合并行數(shù)加上下一個(gè)單元格的列tdObject.occupyCol += trObject[tdIndex + 1].occupyCol;// 刪除后一項(xiàng)trObject.splice(tdIndex + 1, 1);}}//向后拆分 插入的單元格 跨列數(shù)為1if (val.type == "afterSplit") {if (tdObject.occupyCol == 1) {this.$message({message: "此單元格前無可拆分的項(xiàng)",type: "warning"});return false;} else {this.cellObject.occupyRow = tdObject.occupyRow;// 單元格列減1tdObject.occupyCol--;let newObject = {};newObject.index = this.cellObject.index;newObject.name = this.cellObject.name;newObject.label = this.cellObject.label;newObject.occupyCol = 1;newObject.occupyRow = this.cellObject.occupyRow;trObject.splice(tdIndex + 1, 0, newObject);}}//全部單元格索引重排this.newSort();},newSort() {this.trData.forEach((el, i) => {el.index = i;el.child.forEach((al, j) => {al.index = j;al.label = j;});});}

上面的一串代碼也就是實(shí)現(xiàn)的具體邏輯了，相信聰明的小伙伴們一定能看懂的（幾乎主要的都有注釋~）。

大功告成！！！

初次寫博客文章，不怎么會寫。。。
就這樣吧。
demo源碼需要的話可以到我的博客資源內(nèi)下載，或者下面回復(fù)想要源碼。

總結(jié)

以上是生活随笔為你收集整理的vue实现表格单元格的拆分、合并的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。