在之前的項目中，我接到一個需求，需要一個類似excel的表格合并和拆分的需求。
目前我自己初步實現是這樣子的

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

思前想后，只能從table的數據結構入手，所以我就嘗試著寫一個table的數據結構，然后vue的table在element中有固定的模板，我們之前都是用這個直接套用的，現在我發現用這個很難實現這個需求，所以又只能自己用原生的<table>、<tr>、<td>的colspan和rowspan來實現。

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

首先，先定義table的數據結構，根據渲染格式我是寫了一個方法里面來設置table的數據結構


走到這一步的時候，我們已經實現了最基礎的table表格了

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

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

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

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

handleCommand(val) {//定位行列let trIndex = val.pIndex;let tdIndex = val.cellObject.index;// 行數據let trObject = this.trData[trIndex].child;// 列數據let tdObject = this.trData[val.pIndex].child[tdIndex];// 向后合并if (val.type == "afterMerge") {// 最后一個單元格不給向后合并if (tdIndex == this.trData[trIndex].child.length - 1) {this.$message({message: "此單元格后無可合并的項",type: "warning"});return false;}if (tdObject.occupyRow != trObject[tdIndex + 1].occupyRow) {this.$message.warning("格式不同不能合并");return false;} else {// 合并行數加上下一個單元格的列tdObject.occupyCol += trObject[tdIndex + 1].occupyCol;// 刪除后一項trObject.splice(tdIndex + 1, 1);}}//向后拆分 插入的單元格 跨列數為1if (val.type == "afterSplit") {if (tdObject.occupyCol == 1) {this.$message({message: "此單元格前無可拆分的項",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;});});}

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

大功告成！！！

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。