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

在之前的项目中,我接到一个需求,需要一个类似excel的表格合并和拆分的需求。
目前我自己初步实现是这样子的
vue实现表格单元格的拆分、合并_第1张图片
我们的项目是前后分离的,后端用的是.net,前端用的是vue,得到这个需求之后,我的第一反应是网上找找能不能找到类似的功能代码,但是很可惜的是我并没有找到。所以只能自己尝试着写
vue实现表格单元格的拆分、合并_第2张图片
思前想后,只能从table的数据结构入手,所以我就尝试着写一个table的数据结构,然后vue的table在element中有固定的模板,我们之前都是用这个直接套用的,现在我发现用这个很难实现这个需求,所以又只能自己用原生的

colspanrowspan来实现。

这里首先,要感谢我的前端大佬同事,是这位大佬帮我实现了如此复杂的需求逻辑
(ps 真实项目中比我这里写的复杂很多哦~~)

首先,先定义table的数据结构,根据渲染格式我是写了一个方法里面来设置table的数据结构
vue实现表格单元格的拆分、合并_第3张图片
vue实现表格单元格的拆分、合并_第4张图片
走到这一步的时候,我们已经实现了最基础的table表格了
vue实现表格单元格的拆分、合并_第5张图片
剩下的,我们需要在每一个单元格后面加一个按钮来实现合并、拆分的需求,这里我就直接用了elelment里面的组件(https://element.eleme.cn/#/zh-CN/component/installation)
vue实现表格单元格的拆分、合并_第6张图片
我们仿照组件里面的demo写法复制过来稍加修改
vue实现表格单元格的拆分、合并_第7张图片
到了这一步,我们的全部外观展示以及完成了
vue实现表格单元格的拆分、合并_第8张图片
下面我们要开始最难的部分看了,实现拆分、合并的代码需求。
我们在组面里面的@command="handleCommand"方法里面写上面的定义的不同方法。

handleCommand(val) {
   
            //定位行列
            let trIndex = val

你可能感兴趣的:(vue实现表格单元格的拆分、合并)