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

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,
                    }
                }
            }
        },
相关推荐
QTX1873025 分钟前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下31 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
猿榜2 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队2 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2382 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia2 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia2 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
随笔记2 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆2 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js