el-table合并相同数据的单元格

相同的数据合并单元格

<el-table  :data="userList" :span-method="objectSpanMethod"  border>
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column label="用户名称" align="center" key="userName" prop="userName" />
    <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" />
    <el-table-column label="状态" align="center" key="status">
        <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="0"inactive-value="1"
                @change="handleStatusChange(scope.row)"></el-switch>
        </template>
     </el-table-column>
     <el-table-column label="部门" align="center" key="deptId" prop="deptId" />
     <el-table-column label="手机号码"  key="phonenumber"prop="phonenumber" />
     <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
     <el-table-column label="创建时间" align="center" prop="createTime">
         <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160" class-name="small-padding 
        fixed-width">
        <template slot-scope="scope" v-if="scope.row.userId !== 1">
           <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:user:edit']"
              >修改</el-button>
          </template>
      </el-table-column>
 </el-table>

js

//获取数据接口
getList() {
   listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
   this.userList = response.rows;
   this.getSpanArr(this.userList); //便利数据      
   this.total = response.total;
   this.loading = false;
        }
      );
},
//遍历数据
getSpanArr(data) {
   // data就是我们从后台拿到的数据
   for (var i = 0; i < data.length; i++) {
     if (i === 0) {
         this.spanArr.push(1);
        this.pos = 0;
      } else {
       // 判断当前元素与上一个元素是否相同
          if (data[i].userName == data[i - 1].userName) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
// 合并单元格相同内容
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ( columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {//我写的是前3列合并
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
    },