Vue element 表格跨行合并单元格

1、定义 table.js

/**
 * 生成表格合并行坐标阵列 rowspan、colspan 信息
 * @param {表格数据} tableData
 * @param {合并列字段} mergeColumns example : ["filed1",[filed2]]
 * @returns 坐标阵列
 */
export function getTableSpanMap(tableData, mergeColumns) {
  var spanMap = {}
  var prevRowMap = {}
  mergeColumns = mergeColumns || []
  tableData.forEach((row, rowIndex) => {
    Object.keys(row).forEach((columnKey, columnIndex) => {
      if (!mergeColumns.some(x => x === columnKey)) {
        spanMap[rowIndex + '-' + columnIndex] = {
          rowspan: 1,
          colspan: 1
        }
      } else {
        if (
          tableData[rowIndex - 1] &&
          tableData[rowIndex][columnKey] == [tableData[rowIndex - 1][columnKey]]
        ) {
          var span = spanMap[prevRowMap[columnIndex] + '-' + columnIndex]
          span.rowspan = span.rowspan + 1
          span.colspan = 1

          spanMap[rowIndex + '-' + columnIndex] = {
            rowspan: 0,
            colspan: 1
          }
        } else {
          prevRowMap[columnIndex] = rowIndex
          spanMap[rowIndex + '-' + columnIndex] = {
            rowspan: 1,
            colspan: 1
          }
        }
      }
    })
  })
  return spanMap
}

2、Vue 页面使用 table.js

<el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
	<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>
<script>
	import { getTableSpanMap } from '@/utils/table'
	export default {
	    data() {
	      return {       
	        spanMap: {},
	        tableData:[]
	      }
	    },
	    created() {
	        this.fetchTableData()
	    },
	    methods:{
	          fetchTableData() {
	          this.tableData=[{
	                              date: '2016-05-02',
	                              name: '王小虎',
	                              address: '上海市普陀区金沙江路 1518 弄'
	                            }, {
	                              date: '2016-05-04',
	                              name: '王小虎',
	                              address: '上海市普陀区金沙江路 1517 弄'
	                            }, {
	                              date: '2016-05-01',
	                              name: '王小虎',
	                              address: '上海市普陀区金沙江路 1519 弄'
	                            }, {
	                              date: '2016-05-03',
	                              name: '哈哈哈',
	                              address: '上海市普陀区金沙江路 1519 弄'
	                            }]
	          this.setTableSpanMap();// 设置合并行坐标阵列
	        },
	          setTableSpanMap(){
	            this.spanMap = getTableSpanMap(this.tableData,["name","address"])//合并 name、address 列
	          },
	          objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	            return this.spanMap[rowIndex + '-' + columnIndex]
	          }
	        }
	}
</script>