【表格合并单元格】vue-elementul表格动态合并实现方法，合并行，合并列方法【详细讲解，看完就理解】

功能

这个elementul表格单元格合并功能是很多地方会用到的，但是官方文档那个有点看的不明白。这里详细讲一下。
这里包含有一个行的合并方法，一个列的合并方法，都是详细注释了的，讲解了他的规则，看完后就知道怎么用这个了

效果图

这里是合并的样子，有竖着合并的，也有横着合并的。放在一起

这里是原本的表格样子，没有合并的

完整代码

这里可以直接复制到你的vue内打开试试效果，就是上面图片的样子

<template><div><el-table:data="tableData":span-method="arraySpanMethod"borderstyle="width: 100%; margin-top: 20px"><el-table-column prop="id" label="ID" width="180"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="number" sortable label="number"> </el-table-column><el-table-column prop="age" sortable label="age"> </el-table-column></el-table></div>
</template><script>
export default {data() {return {//表格数据tableData: [{id: "000",name: "肖战",number: "234",age: 7,},{id: "001",name: "王一博",number: "234",age: 8,},{id: "002",name: "魏无羡",number: "324",age: 9,},{id: "003",name: "蓝忘机",number: "621",age: 10,},{id: "004",name: "李希侃",number: "539",age: 11,},{id: "005",name: "小栗旬",number: "539",age: 12,},],spanArr: [], //每行合并数pos: 0, //角标索引};},mounted() {//清空合并坐标this.spanArr = []; //每行合并数this.pos = 0; //角标索引this.getSpanArr(this.tableData); //先处理数据，把表格数据放进去},methods: {// 竖着合并处理数据getSpanArr(data) {// 循环for (var i = 0; i < data.length; i++) {// 循环的第一行默认角标给个0，合并数给个1，因为rowspan和colspan需要默认是1，如果是0的话就不显示这个单元格了if (i === 0) {this.spanArr.push(1);this.pos = 0;} else {//这里已经循环到第二行了才会走这里// 判断当前行的某一个字段和上一行的某一个字段是否相同？if (data[i].number === data[i - 1].number) {//如果相同代表要合并，就给上一个元素合并数+1。this.spanArr[this.pos] += 1; //这里pos是0。所以是给spanArr内第一条数据的合并数加了1，变成了2，代表从第一行开始合并1格，记住，1是默认有一格，没加1代表合并一格this.spanArr.push(0); //然后再往spanArr内添加一个0。为什么要这么做呢，因为这里push进去0是加在第二个数据上的。合并的方法内写法是，1代表有数据，每加1代表合并一格，如果是0代表隐藏这一格，上面我们已经变成2了，所以合并一格，合并的就是第二格的数据，如果我们不给第二格的数据改为0.那么第二格的数据会显示，但是被挤在边上，所以这里给0让第二格数据隐藏} else {this.spanArr.push(1); //反之，如果不等于那就正常给个1显示数据但是不合并。this.pos = i; //pos的角标也改为当前的循环。方便下一次循环的时候如果两个字段相同，合并数直接从下一个角标算起}}}console.log(this.spanArr, "span"); //[2, 0, 1, 1, 2, 0]},arraySpanMethod({ row, column, rowIndex, columnIndex }) {//横向合并//角标为2的行，按顺序012也就是第三行数据if (rowIndex === 2) {//从第一列开始if (columnIndex === 0) {//两个参数：竖着合并几位，横向合并几位return [1, 3];} else if (columnIndex === 1) {//这里的意思是第二列不显示，0代表不显示，如果不写这个，那么上面合并的时候就会把这列的数据给挤到旁边去。return [0, 0];} else if (columnIndex === 2) {//这里同理。你需要合并到多少列就把多少列的数据00隐藏掉。return [0, 0];}}// 竖向合并if (columnIndex === 0) {//第一列    //this.spanArr目前的值是[2, 0, 1, 1, 2, 0]const _row = this.spanArr[rowIndex]; //这里拿到spanArr内的第一个数据，我们上面处理时第一个数据是2，所以是合并一格的意思const _col = _row > 0 ? 1 : 0; //这里判断2大于0所以col的值是1，代表正常显示return {rowspan: _row, //这里是2，代表竖着合并数一格colspan: _col, //这里是1，代表显示这一格，但是被上面的合并了，所以看不到这个值。如果为0，这一列就不显示了};//这个位置，else if在来一次，1是角标，代表数组中的角标1，也就是第二列。如果你还想第三列参与合并，那就再else if (columnIndex === 2)，以此类推就行。} else if (columnIndex === 1) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}},},
};
</script><style>
</style>

到这里就把所有规则讲清了，合并的规则。那么可以根据这个规则大家自由发挥

加一点，注意事项：

在正式和后端对接时，this.getSpanArr(this.tableData)的调用不是放在mounted内的，而是直接放在你的请求数据的方法then中的。那么就会造成一个情况，你点击后第一次是正常的，但是你再发送一次请求的时候就会发现你的合并表格变大了，然后有一部分被挤走到旁边之类的。这是因为你的合并坐标并没有清空。还是保存的上一次的，你再点一次就在这基础上再加，所以数据就混乱了。

所以需要在then调用this.getSpanArr(this.tableData)之前把spanArr和pos都清空。

        //清空合并坐标this.spanArr = []this.pos = 0

【表格合并单元格】vue-elementul表格动态合并实现方法，合并行，合并列方法【详细讲解，看完就理解】相关推荐

java doc 合并单元格_AsposeWords操作表格合并单元格
强大的AsposeWords for java不仅支持创建表格,还支持合并单元格.今天就简明扼要记录下如何实现合并单元格. 大家可以完全套用本文提供的代码,只需要提供开始和结束的单元格即可实现合并,无 ...
关于JAVA POI解析WPS docx文档中的table（复杂表格包含单元格横向，纵向的合并）
关于JAVA POI解析WPS docx文档中的table(复杂表格包含单元格横向,纵向的合并) 首先,关于poi解析表格先阅读一篇他人的博客使用poi读取word2007(.docx)中的复杂表格 ...
pandas读取带有合并单元格的excel表格
pandas读取带有合并单元格的excel表格今天在工作的时候碰到读取含有合并单元格的问题,发现读取出来的数据是这样的发现合并单元格只有第一格有内容,其他的都被填充成空值了,找了一圈发现有一个办法 ...
html表格里面怎么合并单元格的快捷键,合并单元格快捷键：Excel怎么合并单元格...
今天来聊聊一篇关于合并单元格快捷键:Excel怎么合并单元格的文章,现在就为大家来简单介绍下合并单元格快捷键:Excel怎么合并单元格,希望对各位小伙伴们有所帮助. 方法如下: 1.首先我们需要将&q ...
合并单元格后打字换行_Excel合并单元格后如何换行
在使用Excel表格编辑文字内容时,有时候出会出字数太多,无法全部显示在一个单元格内,这样就不便于快速查看完整的数据资料,那在Excel合并单元格后要如何换行呢? 接下来,小编跟大家讲解操作方法,新建 ...
html 合并单元格后居中,excel批量合并单元居中，还在手工点合并后居中吗
很多朋友对于列中相同的内容,都会手工点击菜单栏上的合并后居中,这样手工操作的方式,对数据量不是很大的列,操作没有任何问题,但对于列中数据比较多的情况,如果还是先选中相同的内容,然后再进行合并后居中,这 ...
vue中表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽今天,在vue中遇到复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头.vue-split-ta ...
layui表格合并单元格多表_layui动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格done : function(res, curr, count) { ...
html中表格怎么合并单元格居中,word表格怎么合并单元格居中
在excel中,合并.拆分单元格是经常会用到的.而在word文档中,偶尔我们也需要插入表格,然后编辑表格,那么如何对word中的表格单元格进行合并.拆分呢? 一.如何在word中创建表格 1.选择&q ...
php相同数据合并单元格,jQuery_基于jQuery的合并表格中相同文本的相邻单元格的代码，ONE 已经生成的数据表格大致 - phpStudy...
基于jQuery的合并表格中相同文本的相邻单元格的代码 ONE 已经生成的数据表格大致内容如下: 地区地区商品代码商品名称数量有效期至距效期(月) 产品批号规格单位条形码广东深圳 ...

【表格合并单元格】vue-elementul表格动态合并实现方法，合并行，合并列方法【详细讲解，看完就理解】

功能

效果图

完整代码

加一点，注意事项：

【表格合并单元格】vue-elementul表格动态合并实现方法，合并行，合并列方法【详细讲解，看完就理解】相关推荐

最新文章

热门文章