el-table后台接口返回数据动态合并单元格

在实际工作中,通常数据都是后台接口返回的,有时需要对数据进行合并,可利用el-table的span-method方法,结合数据处理,进行合并,如下实例

html 复制代码
<el-table 
    :data="dataTable"
    border
    row-key="id"
    :span-method="objSpanMethod"
></el-table>
javascript 复制代码
// 默认接受的参数{当前行的值,当前列的值,行的下标,列的下标}
// mergeArr:是表格的字段名集合,["name","age","sex"...]
// mergeObj: 是合并信息数据的对象
objSpanMethod({row,column,rowIndex,columnIndex}) {
    // 判断列的属性
    if( mergeArr.indexOf(column.property) !== -1 ) {
        // 判断值是不是为0 
        if (mergeObj[column.property][rowIndex]) {
            return [mergeObj[column.property][rowUndex],1]
        } else {
            // 如果为0,则为需要合并的行
            return [0,0]
        }
    }
}
javascript 复制代码
// 处理数据
getSpanArr(data) {
    mergeArr.forEach((key,index) => {
        // 记录需要合并行的起始位置
        let count = 0
        // 记录每一列的合并信息
        mergeObj[key] = []
        data.forEach((item,index) => {
            // index === 0 表示数据为第一行,直接push一个1
            if (index===0) {
                 mergeObj[key].push(1)
            } else {
                // 判断当前行是否与上一行的值相等,如果相等,在count记录的位置其值+1,表示当前行需要合并push一个0,作为占位
                if (item[key] === data[index-1][key] {
                    mergeObj[key][count] += 1
                    mergeObj[key].push(0)
                } else {
                    count = index
                    mergeObj[key].push(1)
                }
            }
        })
    })
}
相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰6 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询