合作联系微信: w6668263      合作联系电话:177-9238-7426     

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

复制代码
[
{
    "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"
}]
View Code
复制代码

 

posted on   草率的龙果果  阅读(7905)  评论(0编辑  收藏  举报

点击右上角即可分享
微信分享提示