el-table 合并单元格

场景：

若想实现将指定列中，值相同的单元格合并为同一个，该如何实现？

实现思路：

通过el-table组件的span-method属性来实现。span-method属性接受一个方法，这个方法会被调用以确定是否合并单元格，以及如何合并单元格。

完整代码：

<el-table :data="tableData" style="width: 570px" :span-method="handleSpanMethod">
    <el-table-column
        prop="date"
        label="日期"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="address"
        label="地址">
    </el-table-column>
</el-table>
...
const tableData = [{
  date: '2016-05-01',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
}, {
  date: '2016-05-01',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1517 弄'
}, {
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1519 弄'
}, {
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1516 弄'
}];

const handleSpanMethod = ({row, rowIndex, columnIndex}) => {
    if (columnIndex === 0) { // 需要合并列的索引，以date列为例 
        if (rowIndex > 0 && row.date === tableData.value[rowIndex - 1].date ) {
          return {rowspan: 0, colspan: 0};
        }
        let rowspan = getRowspan(row.date, 'date');
        if (rowspan > -1) {
          return {rowspan, colspan: 1};
        }
    }
    // 默认情况下不进行合并
    return {rowspan: 1, colspan: 1};
};

// 计算需要合并的行数
const getRowspan = (value, props) => {
  let count;
  count = tableData.value.filter(item => item[props] === value).length;
  return count;
};