Vue+ElementUI表格合并单元格

很多小伙伴会遇到展示的表格中需要合并单元格的需求，官网的api写的也不够咱们用，最近正好也遇到了一个，写出来供大家分享AWA~（本次分享为行合并，列合并同理，花心思想一想吧,很好改的哦）

其实合并单元格很简单，但是第一次写着实有点摸不着头脑，接下来就带大家写一个Demo，写出来之后就发现原来还是挺好理解的啦~
（PS:ElementUI的大版本2以下是不支持合并单元格的哦，老弟在这被坑了好久）

绑定合并方法

首先我们需要有一个表格
表格是官网的，但合并单元格不是哦~
:span-method=“arraySpanMethod” 绑定合并单元格返回的数组

<template>
  <el-table
    :data="tableData"
    :span-method="arraySpanMethod"
    stripe
    style="width: 100%">
    <el-table-column
      label="序号"
      type="index"
      width="70">
    </el-table-column>
    <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>
</template>

<script>
  export default {
     
    data() {
     
      return {
     
      	//合并单元格数组
      	spanArr: [],
      	//貌似是个中间变量，我也不知道是个什么玩儿意QAQ
		pos: 0,
        tableData: [{
     
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
     
          date: '2016-05-02',
          name: '王小狼',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
     
          date: '2016-05-01',
          name: '王小狼',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
     
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

接下来就是重点：

拼接合并逻辑数组的方法

第一个方法是获取合并单元格的数组，其中需要改动的地方就是绿色部分date他指的是你根据哪一个字段去匹配合并的逻辑，由代码不难看出，当本行的数据的该字段与上一行相同时，对合并数组进行构建，进而实现整个合并数组的形成。
第二个方法就是api中提供的对行或列合并单元格的绑定，这里需要修改的地方就是columnIndex <= 1的1，他代表了我们将那几列按照之前拼好的逻辑数组去合并（这里小于等于1就是前两列进行合并）

getSpanArr(data) {
     
   for (var i = 0; i < data.length; i++) {
     
      if (i === 0) {
     
         this.spanArr.push(1)
         this.pos = 0
      } else {
          // 判断当前元素与上一个元素是否相同
         if (data[i]['date'] === data[i - 1]['date']) {
     
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
         } else {
     
            this.spanArr.push(1)
            this.pos = i
         }
      }
   }
},

arraySpanMethod({
      row, column, rowIndex, columnIndex }) {
     
   if (columnIndex <= 1) {
     
      const _row = this.spanArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
     
         rowspan: _row,
         colspan: _col
      }
   }
},

这时，我们只差最后一步了！就是

调用方法进行合并逻辑数组的拼接

最后，我们在ajax调用成功获取返回值时，调用第一个方法，传入data，进行合并逻辑数组的拼接，
我这里就简单写一个JQ的ajax返回成功调用的方法进行演示

success: function (data) {
     
	//调用方法进行合并逻辑数组的拼接
	that.getSpanArr(data);
	//将返回值赋给表格数据
    that.tableData = data;
},

当当当当，接下来就OK啦
萌新第一次写博客，技术或者文章有什么不足之处欢迎各位大佬指正，又不明白的小伙伴也欢迎大家一起研究~