Ant Design Vue & Element-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.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.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 =
                        pages  > 1 ? rowSpan - (pages - 1) * 10 - (10 - remain) 
                        : rowSpan - (10 - remain)
                    for (let i = 1; i < pages; i++) {
                        arr[(i + currentPage) * 10].rowSpan = 10
                    }
                    let end = (pages + currentPage) * 10
                    if(rowSpan - (10 - remain) > 0 && pages === 0){
                        end = (pages + currentPage + 1) * 10
                    }
                    arr[end].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 =
                        pages  > 1 ? rowSpan - (pages - 1) * 10 - (10 - remain) 
                        : rowSpan - (10 - remain)
                    for (let i = 1; i < pages; i++) {
                        arr[(i + currentPage) * 10].rowSpan = 10
                    }
                    let end = (pages + currentPage) * 10
                    if(rowSpan - (10 - remain) > 0 && pages === 0){
                        end = (pages + currentPage + 1) * 10
                    }
                    arr[end].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,
                    }
                }
            }
        },