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,
                    }
                }
            }
        },
相关推荐
LuckySusu1 小时前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js
勤奋菲菲1 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
前端开发呀2 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云和数据.ChenGuang2 小时前
vue中构建脚手架
前端·javascript·vue.js
渣哥2 小时前
面试官最爱刁难:Spring 框架里到底用了多少经典设计模式?
javascript·后端·面试
q_19132846952 小时前
基于RuoYi框架+Mysql的汽车进销存后台管理系统
数据库·vue.js·spring boot·mysql·汽车·个人开发·若依