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,
                    }
                }
            }
        },
相关推荐
白水清风几秒前
Vue3之渲染器
前端·vue.js·面试
白水清风6 分钟前
Vue3之组件化
前端·vue.js·面试
luckyPian8 分钟前
ES6+新特性:ES7(二)
开发语言·javascript·ecmascript
边洛洛9 分钟前
解决[PM2][ERROR] Script not found: D:\projects\xxx\start
前端·javascript
白水清风12 分钟前
Vue3之响应式系统
vue.js·面试·前端工程化
_pengliang35 分钟前
React Native 使用 react-native-credentials-manager 接入谷歌登录教程
javascript·react native·react.js
console.log('npc')41 分钟前
使用 Vue3 和 Element Plus 实现选择新增用户集下拉选项框,切换类型,有物业,网格,电子围栏,行政区划管理
javascript·vue.js·elementui
一只小阿乐44 分钟前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model
前端付豪1 小时前
项目启动:搭建Vue 3工程化项目
前端·javascript·vue.js
Asort1 小时前
JavaScript设计模式(二十)——状态模式 (State):复杂状态管理的优雅解决方案
前端·javascript·设计模式