关于el-table单元格合并的解决方案

简介: 关于el-table单元格合并的解决方案

el-table单元格合并示例

先看以下代码:

<template><div><el-table      :data="tableData"      :span-method="objectSpanMethod"borderstyle="width: 100%; margin-top: 20px"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="amount1"label="数值 1(元)"></el-table-column><el-table-columnprop="amount2"label="数值 2(元)"></el-table-column><el-table-columnprop="amount3"label="数值 3(元)"></el-table-column></el-table></div></template><script>exportdefault {
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10        }, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12        }, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9        }, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17        }, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15        }]
      };
    },
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex===0) {
if (rowIndex%2===0) {
return {
rowspan: 2,
colspan: 1            };
          } else {
return {
rowspan: 0,
colspan: 0            };
          }
        }
      }
    }
  };
</script>

效果:
image.png

实现el-table单元格合并的方法

从上述示例我们可以知道,el-table绑定:span-method="objectSpanMethod"即可实现合并,objectSpanMethod是处理单元格合并方案的回调函数

需要注意的是,objectSpanMethod是会被循环执行的,整个table有多少单元格,objectSpanMethod就会执行多少次。


objectSpanMethod接收一个object参数,代表当前执行objectSpanMethod的单元格信息,参数解构出四个属性,分别是row(当前行), column(当前列), rowIndex(当前行号,从0开始), columnIndex(当前列号,从0开始)


objectSpanMethod返回一个描述合并单元格的对象或数组,如果是对象,那么对象的rowspan代表要合并的行数,colspan代表要合并的列数;如果是数组,那么数组第一个元素代表要合并的行数,数组第二个元素代表要合并的列数


而且千万千万千万要注意的是,单元格的合并,是从起始位置合并的,而不是从末尾位置合并,意思就是,比如你想要合并3到6行且是第一列的单元格,那么应该从第三行第一列开始合并,按照如下代码进行设置

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex===0) { // 先判断是不是第一列,只有第一列才执行合并if (rowIndex===2) { // 先判断是不是第三行,只有第三行才执行合并return {
rowspan: 3, // 从起始位置,即第三行开始,执行合并3行colspan: 1, // 从起始位置,即第一列开始,执行合并1列            };
          } else {
return { // 第一列的其他元素不执行合并rowspan: 0, // 为0,不执行合并colspan: 0// 为0,不执行合并            };
          }
        }
      }



目录
相关文章
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
692 0
|
JavaScript
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
945 0
Element的el-table行列错位对不齐问题处理
本文目录 1. 问题表现 2. 问题发现 3. 问题处理 4. 另一种处理方案
3903 0
Element的el-table行列错位对不齐问题处理
|
5月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
447 0
|
7月前
|
JavaScript 前端开发 索引
Element_Table的单元格合并
Element_Table的单元格合并
|
7月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
7月前
|
小程序
06 - table表格标签+ 行合并+列合并
06 - table表格标签+ 行合并+列合并
130 0
|
前端开发
el-table 在第一行添加合计行和操作按钮
el-table 在第一行添加合计行和操作按钮
176 0
|
开发者
element el-table固定列凹陷问题
element el-table固定列凹陷问题
115 0