1. Ant Design Vue 中 table 合并行功能

   <a-tableref="table":dataSource="comList":columns="columns":scroll="{ y: 430 }"size="small"rowKey="id":rowClassName="rowClassNameHandle":customRow="record => {return {on: {click: () => clickRow(record), // 点击行},}}":pagination="ipagination"@change="handleTableChange"/> columns: [{title: '楼层',dataIndex: 'floor',align: 'center',width: 130,ellipsis: true,customRender: (text, row, index) => {const obj = {children: text,attrs: {},}obj.attrs.rowSpan = row.rowSpanreturn obj},},{title: '名称',dataIndex: 'name',align: 'center',ellipsis: true,},],this.setRowSpan(this.comList, 'floor')//数据处理    data：表格数据，field： 要合并行的属性字段setRowSpan(data, field) {let count = 0 let indexCount = 1 while (indexCount < data.length) {const item = data[count]if (!item.rowSpan) {item.rowSpan = 1}if (item[field] === data[indexCount][field]) {item.rowSpan++data[indexCount].rowSpan = 0} else {count = indexCount}indexCount++}},

以上，如果表格不用分页，那么按照 floor 字段值一样就合并行的功能就已经实现了。

以下，如果表格是按照10条数据为一页来分页的合并行功能实现：

 // 进一步处理数据，按10条数据分页，来调整合并行的值this.comList.forEach((item, index) => {const rowSpan = item.rowSpanconst remain = index % 10const pages = parseInt(item.rowSpan / 10)const currentPage = parseInt(index / 10)if (rowSpan > 10 - remain) {item.rowSpan = 10 - remain //首const rowSpanRemain = rowSpan - (pages - 1) * 10 - (10 - remain)for (let i = 1; i < pages; i++) {arr[(i + currentPage) * 10].rowSpan = 10}if (arr[(pages + currentPage) * 10]) {arr[(pages + currentPage) * 10].rowSpan = rowSpanRemain //尾}}})

2. Element ui 中table 合并行功能

  <el-table:data="comList.slice((ipagination.pageNo - 1) * ipagination.pageSize,ipagination.pageNo * ipagination.pageSize,)"style="width: 100%"max-height="450":span-method="objectSpanMethod"stripebordersize="mini"><el-table-column prop="floor" label="楼栋" width="150"> </el-table-column><el-table-column prop="name" label="wifi名称"> </el-table-column></el-table><el-pagination:current-page="ipagination.pageNo":page-size="ipagination.pageSize"layout="total, prev, pager, next":total="ipagination.total"@current-change="handleCurrentChange"size="mini"></el-pagination>// arr 为表格数据源this.setRowSpan(arr, 'floor')// 如果有分页才需要此段代码arr.forEach((item, index) => {const rowSpan = item.rowSpanconst remain = index % 10const pages = parseInt(item.rowSpan / 10)const currentPage = parseInt(index / 10)if (rowSpan > 10 - remain) {item.rowSpan = 10 - remain //首const rowSpanRemain = rowSpan - (pages - 1) * 10 - (10 - remain)for (let i = 1; i < pages; i++) {arr[(i + currentPage) * 10].rowSpan = 10}if (arr[(pages + currentPage) * 10]) {arr[(pages + currentPage) * 10].rowSpan = rowSpanRemain //尾}}})this.comList = arrobjectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {console.log(row)if (row.rowSpan > 0) {return { rowspan: row.rowSpan, colspan: 1 }} else {return {rowspan: 0,colspan: 0,}}}},