Ant Design Vue & Element-ui 中table 合并行功能,以及带分页并合并行

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

    
   

 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 = 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 合并行功能

  
             
             
        
        
        


  
   // 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,
                    }
                }
            }
        },