今天记录一下做项目遇到的 elementui表格 内容相同合并行
表格+分页器代码

       <el-table:data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
          border
          style="width: 80%; margin-top: 20px"
          :span-method="objectSpanMethod"
        >
          <el-table-column prop="name" label="样品名" width="180"></el-table-column>
          <el-table-column prop="gene" label="基因"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column prop="Alle" label="等位基因型(四位)"></el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <!-- 查看报告页按钮 -->
              <router-link to="/doctor/firstanalysis/hla1seachReport2">
                <el-button @click="seach(scope.row)" type="disabled" size="mini" prop="id">查 看</el-button>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
        //分页器
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        ></el-pagination>

合并表格事件代码 这里我合并的是第一列和第五列
data代码

  data() { 
    return { 
      total: 0, //数据总量
      pageSize: 5, //每页显示的条目数
      currentPage: 1, //当前页数
      tableData: [],
      spanArr: [],
      position: 0
    };
  },

    objectSpanMethod({  row, column, rowIndex, columnIndex }) { 
      //表格合并行
      if (columnIndex === 0) { 
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return { 
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 4) { 
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return { 
          rowspan: _row,
          colspan: _col
        };
      }
    },
    rowspan() { 
      this.tableData.forEach((item, index) => { 
        if (index === 0) { 
          this.spanArr.push(1);
          this.position = 0;
        } else { 
          if (this.tableData[index].name === this.tableData[index - 1].name) { 
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else { 
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    },
        request() { 
      this.axios({ 
        url: API.hla1exportReportTab,
        method: "get",
        params: {  id: this.TypingID }
      }).then(res => { 
        console.log(res);
        let result = JSON.parse(res.data.data);
        this.tableData = result.Data;
        console.log(this.tableData); //页面加载完成后请求到的总数据
        this.rowspan();
      });
    },

效果图