elementUI table合并相同数据的单元格
<template> <div> <el-table :data="tableData4" :span-method="objectSpanMethod" border> <!--绑定列 此处省略--> </el-table> </div> </template> <script>
合并方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) { const spanArr = this.spanArr switch (columnIndex) { case 1: return { rowspan: spanArr.psName.spanArr[rowIndex], colspan: spanArr.psName.spanArr[rowIndex] == 0 ? 0 : 1 } // eslint-disable-next-line no-unreachable break case 2: return { rowspan: spanArr.facilitiesName.spanArr[rowIndex], colspan: spanArr.facilitiesName.spanArr[rowIndex] == 0 ? 0 : 1 } // eslint-disable-next-line no-unreachable break default: return { rowspan: 1, colspan: 1 } // eslint-disable-next-line no-unreachable break } },
计算合并的单元格computed
computed: { spanArr() { const megre = ['psName', 'facilitiesName'] const data = this.tableDataRows const spanArr = {} megre.forEach(m => { spanArr[m] = { spanArr: [], pos: 0 } }) data.forEach((row, i) => { megre.forEach(m => { if (i == 0) { spanArr[m].spanArr.push(1) spanArr[m].pos = 0 } else { if (row[m] === data[i - 1][m]) { spanArr[m].spanArr[spanArr[m].pos] += 1 spanArr[m].spanArr.push(0) } else { // 不相等push 1,并且可修改下标指向 spanArr[m].spanArr.push(1) spanArr[m].pos = i } } }) }) return spanArr } }
测试list JSON
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
[ { "id": null, "psName": "一般四川", "psId": "ff80808179f39a9f0179f475390d2416", "rows": "__vue_devtool_undefined__", "facilitiesId": "2e85ebab-1b33-4405-bb84-66188b20037e", "facilitiesName": "总表123132131", "type": "2", "equipId": "2e85ebab-1b33-4405-bb84-66188b20037e", "equipName": "总表123132131", "dataTime": "2021-08-19 23:30:00", "status": "744.08", "ia": "787.75", "ib": "123.04", "ic": "945.45", "ua": "307.96", "ub": "169.37", "uc": "27.87", "pt": "288.49" }, { "id": null, "psName": "一般工业企业zhuz", "psId": "4028864d7aa3e75c017aa3f3e9b10060", "rows": "__vue_devtool_undefined__", "facilitiesId": "618838dc-de1d-4e26-a9e8-ff53c94631ef", "facilitiesName": "总表-zhuz", "type": "2", "equipId": "618838dc-de1d-4e26-a9e8-ff53c94631ef", "equipName": "总表-zhuz", "dataTime": "2021-08-19 23:30:00", "status": "253.55", "ia": "482.56", "ib": "556.77", "ic": "836.59", "ua": "138.00", "ub": "618.28", "uc": "437.91", "pt": "177.80" }, { "id": null, "psName": "一般工业企业zhuz", "psId": "4028864d7aa3e75c017aa3f3e9b10060", "rows": "__vue_devtool_undefined__", "facilitiesId": "7d69e3a7-915a-4951-bf16-d9ec7cc825b6", "facilitiesName": "生产单元1-1", "type": "4", "equipId": "11", "equipName": "生产设备1-1-1", "dataTime": "2021-08-19 23:30:00", "status": "13.66", "ia": "56.19", "ib": "292.93", "ic": "555.98", "ua": "634.78", "ub": "706.64", "uc": "765.63", "pt": "860.26" }, { "id": null, "psName": "一般工业企业zhuz", "psId": "4028864d7aa3e75c017aa3f3e9b10060", "rows": "__vue_devtool_undefined__", "facilitiesId": "7d69e3a7-915a-4951-bf16-d9ec7cc825b6", "facilitiesName": "生产单元1-1", "type": "4", "equipId": "123456", "equipName": "生产设备1-1-2", "dataTime": "2021-08-19 23:30:00", "status": "749.55", "ia": "462.33", "ib": "845.66", "ic": "928.42", "ua": "840.98", "ub": "397.23", "uc": "639.85", "pt": "516.84" }, { "id": null, "psName": "一般工业企业zhuz", "psId": "4028864d7aa3e75c017aa3f3e9b10060", "rows": "__vue_devtool_undefined__", "facilitiesId": "fb735f3f-d416-44fc-b6d4-845935cbdb3a", "facilitiesName": "生产单元1-2", "type": "4", "equipId": "sbbh", "equipName": "生产设备1-2-1", "dataTime": "2021-08-19 23:30:00", "status": "517.99", "ia": "28.06", "ib": "510.51", "ic": "704.04", "ua": "349.79", "ub": "174.45", "uc": "545.55", "pt": "823.26" }, { "id": null, "psName": "一般工业企业zhuz", "psId": "4028864d7aa3e75c017aa3f3e9b10060", "rows": "__vue_devtool_undefined__", "facilitiesId": "fb735f3f-d416-44fc-b6d4-845935cbdb3a", "facilitiesName": "生产单元1-2", "type": "4", "equipId": "13", "equipName": "生产设备1-2-2", "dataTime": "2021-08-19 23:30:00", "status": "537.07", "ia": "114.95", "ib": "996.32", "ic": "942.68", "ua": "676.65", "ub": "107.89", "uc": "365.55", "pt": "205.78" }, { "id": null, "psName": "一般工业企业zhuz", "psId": "4028864d7aa3e75c017aa3f3e9b10060", "rows": "__vue_devtool_undefined__", "facilitiesId": "4464b2b7-2789-4142-b8c6-69b41986a4cc", "facilitiesName": "治污单元1-1", "type": "5", "equipId": "123", "equipName": "治污设备1-1-1", "dataTime": "2021-08-19 23:30:00", "status": "69.02", "ia": "240.57", "ib": "80.76", "ic": "303.28", "ua": "15.52", "ub": "783.44", "uc": "459.24", "pt": "442.42" }, { "id": null, "psName": "一般工业企业zhuz", "psId": "4028864d7aa3e75c017aa3f3e9b10060", "rows": "__vue_devtool_undefined__", "facilitiesId": "4464b2b7-2789-4142-b8c6-69b41986a4cc", "facilitiesName": "治污单元1-1", "type": "5", "equipId": "1", "equipName": "治污设备1-1-2", "dataTime": "2021-08-19 23:30:00", "status": "789.37", "ia": "234.20", "ib": "809.08", "ic": "122.37", "ua": "948.38", "ub": "839.94", "uc": "146.43", "pt": "837.44" }, { "id": null, "psName": "一般工业企业zhuz", "psId": "4028864d7aa3e75c017aa3f3e9b10060", "rows": "__vue_devtool_undefined__", "facilitiesId": "33a0f6f0-344a-4fc0-b411-b3195134eb75", "facilitiesName": "治污单元1-2", "type": "5", "equipId": "1", "equipName": "治污设备1-2-1", "dataTime": "2021-08-19 23:30:00", "status": "25.32", "ia": "542.61", "ib": "183.39", "ic": "841.28", "ua": "778.96", "ub": "370.73", "uc": "540.55", "pt": "205.03" }, { "id": null, "psName": "污水处理厂四川qmj111", "psId": "ff80808179bbd52b0179c142f18c0027", "rows": "__vue_devtool_undefined__", "facilitiesId": "f488f117-faf8-4de8-8da0-549c06685c41", "facilitiesName": "总表2", "type": "2", "equipId": "f488f117-faf8-4de8-8da0-549c06685c41", "equipName": "总表2", "dataTime": "2021-08-19 23:30:00", "status": "908.50", "ia": "438.43", "ib": "767.23", "ic": "353.42", "ua": "613.41", "ub": "572.92", "uc": "215.55", "pt": "57.92" }, { "id": null, "psName": "一般工业企业qmj111", "psId": "ff80808179b101750179b103fe3d0000", "rows": "__vue_devtool_undefined__", "facilitiesId": "b4e0bbe1-d0f5-41f1-9c7f-ebe6e2d3b020", "facilitiesName": "总表1", "type": "2", "equipId": "b4e0bbe1-d0f5-41f1-9c7f-ebe6e2d3b020", "equipName": "总表1", "dataTime": "2021-08-19 23:30:00", "status": "158.54", "ia": "869.26", "ib": "709.92", "ic": "270.02", "ua": "21.83", "ub": "55.95", "uc": "917.77", "pt": "322.60" }, { "id": null, "psName": "一般工业企业qmj111", "psId": "ff80808179b101750179b103fe3d0000", "rows": "__vue_devtool_undefined__", "facilitiesId": "71498f37-d8c1-44f7-9f37-3c8438d66308", "facilitiesName": "生产单元111", "type": "4", "equipId": "1", "equipName": "省1-1", "dataTime": "2021-08-19 23:30:00", "status": "184.88", "ia": "673.91", "ib": "26.49", "ic": "218.46", "ua": "104.59", "ub": "431.33", "uc": "102.03", "pt": "828.98" }, { "id": null, "psName": "一般工业企业qmj111", "psId": "ff80808179b101750179b103fe3d0000", "rows": "__vue_devtool_undefined__", "facilitiesId": "71498f37-d8c1-44f7-9f37-3c8438d66308", "facilitiesName": "生产单元111", "type": "4", "equipId": "1", "equipName": "1-2", "dataTime": "2021-08-19 23:30:00", "status": "302.90", "ia": "458.74", "ib": "851.63", "ic": "390.65", "ua": "804.77", "ub": "925.45", "uc": "217.32", "pt": "100.52" }, { "id": null, "psName": "一般工业企业qmj111", "psId": "ff80808179b101750179b103fe3d0000", "rows": "__vue_devtool_undefined__", "facilitiesId": "9c02a8a4-e591-468e-9cd1-a7585d67b485", "facilitiesName": "治污1-1", "type": "5", "equipId": "33", "equipName": "治污2-2", "dataTime": "2021-08-19 23:30:00", "status": "291.86", "ia": "617.09", "ib": "523.12", "ic": "921.96", "ua": "960.01", "ub": "177.72", "uc": "226.45", "pt": "925.93" }, { "id": null, "psName": "一般工业企业qmj111", "psId": "ff80808179b101750179b103fe3d0000", "rows": "__vue_devtool_undefined__", "facilitiesId": "9c02a8a4-e591-468e-9cd1-a7585d67b485", "facilitiesName": "治污1-1", "type": "5", "equipId": "11", "equipName": "治污2-3", "dataTime": "2021-08-19 23:30:00", "status": "39.27", "ia": "525.08", "ib": "395.55", "ic": "261.74", "ua": "665.00", "ub": "824.48", "uc": "876.87", "pt": "95.73" }, { "id": null, "psName": "一般工业企业qmj111", "psId": "ff80808179b101750179b103fe3d0000", "rows": "__vue_devtool_undefined__", "facilitiesId": "9c02a8a4-e591-468e-9cd1-a7585d67b485", "facilitiesName": "治污1-1", "type": "5", "equipId": "1", "equipName": "治污2-1", "dataTime": "2021-08-19 23:30:00", "status": "995.90", "ia": "960.73", "ib": "505.51", "ic": "426.87", "ua": "342.20", "ub": "830.10", "uc": "255.70", "pt": "956.78" }, { "id": null, "psName": "一般工业企业cc", "psId": "ff80808179f39a9f0179f3c52c2a0001", "rows": "__vue_devtool_undefined__", "facilitiesId": "15478af0-3e2f-475f-94e0-9f72d510d57b", "facilitiesName": "111", "type": "2", "equipId": "15478af0-3e2f-475f-94e0-9f72d510d57b", "equipName": "111", "dataTime": "2021-08-19 23:30:00", "status": "515.09", "ia": "275.97", "ib": "132.59", "ic": "325.81", "ua": "16.40", "ub": "518.29", "uc": "517.59", "pt": "703.51" }]
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步