vue实现表格单元格的拆分、合并

在之前的项目中，我接到一个需求，需要一个类似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实现表格单元格的拆分、合并相关推荐

合并单元格后怎么拆分单元格（拆分合并后的单元格方法）
电脑excel表格是很多人都会在办公当中会用到的工具了,在整理表格数据时,我们时常会对表格进行合并处理,那么合并的单元格又要如何重新拆分呢?重庆技校网这里就和大家讲讲电脑excel合并单元格怎么拆分开 ...
vue复杂表格单元格合并根据数据动态合并
我们在开发中最常见的就是表格,而往往有一些复杂表格都不大好实现,对于合并单元格不是固定的,而是需要根据数据是否相同去动态设置合并的表格,本文把方法分享给大家,可以根据数据动态生成合并单元格,无论导出需 ...
iview table表格单元格的动态合并
1. 需求需要将从后台获取的数据,在前端渲染时,如果同一列相邻的数据相同,则合并成一个单元格. 即: 需要将上图两个单元格合并,成果图如下 2. 问题本项目使用的是iview组件,iview组件也 ...
python读取合并单元格并拆分合并单元格写出
import pandas as pddata = pd.read_excel(r'C:/Users/14369/Desktop/博文markdown版/测试数据结果.xls') data.colum ...
vue el-table的合并单元格与拆分单元格
vue el-table的合并单元格与拆分单元格 methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {const f ...
计算机表格单元格合并,excel表格数据拆分和合并单元格-excel中如何将已经合并的单元格拆分，并将该单元格......
Excel怎么把一个合并单元格的内容拆分为几个单元格... 要直接位置得到,则有俩种可能性第一种,合元格是格得来的假合并单元格,单元格都有内容,直接解除合并即可第二种,若确实是真实合并单元格,则需 ...
在Excel表格中如何快速拆分合并单元格
在Excel表格中如何快速拆分合并单元格目录在Excel表格中如何快速拆分合并单元格 1.例如:将销售人列中的合并单元格拆分还原 2.选中销售人姓名,点击[开始]选项卡中[合并居中] 3.再点击[ ...
element 表格单元格内容不换行_实例29_在Word表格中将上下行相同内容的单元格自动合并...
实例28讲了如何在Excel文件中自动合并上下行相同内容的单元格,此例则讲一讲如何在Word文件中做类似的操作.因为处理Excel和Word的模块是不同的,所以合并单元格也有一些差异.相对来说,Wor ...
JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格一.需求如果存在一个表格,想把其中某一列内容相同的部分合并单元格,用J ...

vue实现表格单元格的拆分、合并

vue实现表格单元格的拆分、合并相关推荐

最新文章

热门文章