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>
效果：
实现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，不执行合并 }; } } }
