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-buttonsize="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};}},