elementui合并指定表格单元格合并行合并列

我们先看看官网给的例子,只拿合并部分代码

//这个是合并列

arraySpanMethod({ row, column, rowIndex, columnIndex }) {

        if (rowIndex % 2 === 0) {

          if (columnIndex === 0) {

            return [1, 2];

          } else if (columnIndex === 1) {

            return [0, 0];

          }

        }

      },

//这个是合并行

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {

        if (columnIndex === 0) {

          if (rowIndex % 2 === 0) {

            return {

              rowspan: 2,

              colspan: 1

            };

          } else {

            return {

              rowspan: 0,

              colspan: 0

            };

          }

        }

      }

官网给的DATA很规范,给出了每碰到2整除的时候合并行,然而实际业务中需要合并不确定行数位置,不确定合并行数量的情况。

如果没理解这个循环和rowspan、colspan,完全没法用,我就看了2个小时,还分别console.log了row,col来看,直到有个大侠写的才懂。


1、确定每行需要合并的标志

在数据准备中得到数据列表

data():{

return{

tableData:[{xxxxxxxx}]

}

}

2、在中计算需要合并的行

mounted(){

        this.getSpanArr(this.tableData);

    },

3、method中

getSpanArr(data) {

      this.spanArr = [];

      for (var i = 0; i < data.length; i++) {

        if (i === 0) {

          // 如果是第一条记录(即索引是0的时候),向数组中加入1

          this.spanArr.push(1);

          this.pos = 0;

        } else {

          //如果条件相等,计算到合并的行中,我这里使用的是title相等条件

          if (data[i].title === data[i - 1].title) {            

            this.spanArr[this.pos] += 1;

            this.spanArr.push(0);

          } else {

            // 不相等push 1

            this.spanArr.push(1);

            this.pos = i;

          }

        }

      }

    }

4、合并行方法

objectSpanMethod({ row, column, rowIndex, columnIndex }) {

        if (columnIndex === 0) {

        const _row = this.spanArr[rowIndex];

        const _col = _row > 0 ? 1 : 0;

        return {//这个return的内容返回本行是显示还是隐藏,例如,_row=2,_col=1代表合并2行1列,如果都是0则不显示该行

          rowspan: _row,

          colspan: _col,

          pos:0,

        };

      }


elmentui表格合并
发表:2022-11-19 00:00:00view: 119
局域网内无互联网停车场出入自动管理系统
发表:2022-08-09 00:00:00view: 146
适用于培训学校、幼儿园、早教。
发表:2022-07-06 00:00:00view: 212
洗鞋连锁店数字化运营系统,降低经营成本,一体化厂房提高洗鞋工作效率
发表:2022-06-07 00:00:00view: 502
温湿度监控系统使用背景,药材,医疗,食品保存和冷链运输中的可视化监控
发表:2022-08-06 00:00:00view: 415
免费汽车维修管理系统,配件出入库管理,维修单据录入和打印,客户管理,财务管理
发表:2022-02-03 00:00:00view: 405
电脑,微信小程序都能访问,系统支持自动核算成本,业绩统计,订单拆分下单
发表:2022-03-19 00:00:00view: 237
此时由于申请单处于待审批状态,车辆锁住中,其他人员不能申请该辆车,造成时间上的浪费。
发表:2022-09-03 00:00:00view: 188
手机端可控制道闸管理系统
发表:2022-08-28 00:00:00view: 634
打开手机微信小程序搜索“派车堂”或扫太阳码码进入小程序
发表:2021-12-17 00:00:00view: 152
支持电脑下单,手机小程序下单,订单持久化保存在服务器不丢失,报单分单给不同供货商,数据图形化统计,数据导出,微信扫码分享订单详情

@2018 bbcweb.cn All Right Reserved.

智能单位车辆管理 解决方案 在线演示 常见问题