1. Ant Design Vue 中 table 合并行功能
javascript
<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.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条数据为一页来分页的合并行功能实现：
javascript
// 进一步处理数据，按10条数据分页，来调整合并行的值
this.comList.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 合并行功能
javascript
<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.comList = 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,
}
}
}
},