AntDesignVueElement-ui中table合并行功能,以及带分页并合并行

1. Ant Design Vue 中 table 合并行功能 <a-table ref="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.rowSpan return obj }, }, { title: '名称', dataIndex: 'name', align: 'center', ellipsis: true, }, ], this.setRowSpan(this List, '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 List.forEach((item, index) => { const rowSpan = item.rowSpan const remain = index % 10 const 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" stripe border size="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.rowSpan const remain = index % 10 const 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 List = arr objectSpanMethod({ 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, } } } },