elment-ui的table组件多行合并

需求是要对表格的相同项的数据进行合并，elment-ui的table组件有提供这种需求，但是demo比较简单，网上搜了一遍想找参考大部分写的没太看懂，于是自己花了点时间写了个较简单的demo

/* eslint-disable */
<template>
  <div>
    <el-table
      :data="elTable"
      :span-method="mergeTable"
      border
      style="width: 500; margin-top: 20px">
      <el-table-column
        prop="month"
        label="时间"
        width="180">
        <template slot-scope="scope">
          <span>{{scope.row.month}}</span>
          <el-button type="danger" size="mini" @click="addItem(scope)">添加</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
      label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleteItem(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 这里假设同一日期的数据是紧邻的 比如同一天日期的数据在前后顺序紧挨着
        elTable: [
          {
            month: '2018-12-1',
            name: '张三',
            id: 1,
          },
          {
            month: '2018-12-1',
            name: '李四',
            id: 2,
          },
          {
            month: '2018-12-1',
            name: '王五',
            id: 3,
          },
           {
            month: '2018-12-2',
            name: '张三',
            id: 1,
          },
          {
            month: '2018-12-2',
            name: '李四',
            id: 2,
          },
          {
            month: '2018-12-3',
            name: '王五',
            id: 3,
          },
          {
            month: '2018-12-3',
            name: '张三',
            id: 1,
          },
          {
            month: '2018-12-3',
            name: '李四',
            id: 2,
          },
          {
            month: '2018-12-3',
            name: '王小虎',
            id: 6,
          },
        ],
        // 存放表格日期单元格的rowspan和colspan信息
        spanArr: []
      };
    },

    watch: {
      // 观测表格数据 更新行列信息
      elTable: {
        handler: function(){
          this.spanArr = this.getSpanData()
        }
      }
    },

    methods: {
      // 遍历分析表格数据 记录每一行的rowspan和colspan
      getSpanData(){
        let spanArr = []
        for (let i = 0; i < this.elTable.length; i++) {
          let obj = {}
          if (i === 0) {
            // 第一项直接设置默认的值
            obj.rowspan = 1
            obj.colspan = 1
            spanArr.push(obj)
          } else {
            if (this.elTable[i].month === this.elTable[i-1].month) {
              // 前后两项的month相同 后面那一项rowspan和rowspan都设置为0
              obj.rowspan = 0
              obj.rowspan = 0
              spanArr.push(obj)

              // 找到month相同项中第一项 rowspan值加1
              let index = this.elTable.findIndex((item)=>item.month === this.elTable[i].month)
              ++spanArr[index].rowspan
            } else {
              // 前后不相同 一个新的日期 设置默认值就好
              obj.rowspan = 1
              obj.colspan = 1
              spanArr.push(obj)
            }
          }
        }
        return spanArr
      },

      mergeTable({ row, column, rowIndex, columnIndex }) {
        // 这里只针对第一列进行合并操作
        if (columnIndex === 0) {
          let rowspan = this.spanArr[rowIndex].rowspan
          let colspan = this.spanArr[rowIndex].colspan
          return {rowspan, colspan}
        }
      },

      addItem(scope) {
        // 假数据
        let item = {
          id: 8,
          name: 'jack'
        }
        item.month = scope.row.month
        let inserIndex = scope.$index + 1
        for (let i = inserIndex; i < this.elTable.length; i++) {
          if (this.elTable[i].month === item.month) {
            ++inserIndex
          } else {
            break
          }
        }
        this.elTable.splice(inserIndex, 0, item)
        console.log(this.spanArr)
      },

      deleteItem(index) {
        this.elTable.splice(index, 1)
      }
    }
  };
</script>
复制代码

通过element-ui的提供的span-method我们可以自定义一个mergeTable方法去进行行列合并的操作，这里我们要对同一个日期的单元格进行合并，mergeTable需要返回当前行中日期那一项的rowspan和colspan。表格数据存在elTable中，elTable更新后，通过便利分析elTable的数据可以将合并后的行列信息存在spanArr数组中，这样mergeTable方法可以直接通过索引得到对应的rowspan和colspan。