So verwenden Sie die Tabellenkomponente von iview, um Tabellenspalten zusammenzuführen

Der Inhalt dieses Artikels befasst sich mit der Verwendung der Tabellenkomponente von iview zum Zusammenführen von Tabellenspalten. Ich hoffe, dass er für Freunde hilfreich ist.

Tabellenkomponenten-Headergruppierung von iview

Tabellenkomponenten-Headergruppierung von iview

Anforderungsbeschreibung

• Kopfzeilen zusammenführen

• Spalten zusammenführen, [Gesamt] anzeigen

Der endgültige Effekt

Problem

• Kopfzeile Es gibt doppelte Schlüssel, Anleitung Daten abgleichen

• , um zusammengeführte Spalten zu implementieren – Sie müssen die Tabellenkomponente ändern, um

1. Tabellenüberschriften zusammenführen

Laut der von iview bereitgestellten Demo ist ersichtlich, dass die Bearbeitung des Headers relativ einfach ist und Sie ihn nur entsprechend dem Format schreiben müssen.

• Problem: Es gibt doppelte Schlüssel im Tabellenkopf, wie werden Tabellenkopf und Tabellendaten abgeglichen?

• Lösung:

Die Tabellenkopf-Schlüssellieferanten-ID, die gruppiert werden muss

Die Tabellendaten, die gruppiert werden müssen Schlüssellieferanten-ID

[
    {
        "width":"200",
        "align":"center",
        "title":"物品名称",
        "ellipsis":true,
        "key":"name",
    },
    {
        "width":"100",
        "align":"center",
        "title":"数量",
        "ellipsis":true,
        "key":"purchaseAmount",
    },
    {
        "width":"166",
        "align":"center",
        "title":"lyy369",
        "ellipsis":true,
        "key":"supplier_11113173785",
        "children":[
            {
                "width":"100",
                "align":"center",
                "title":"单价(元)",
                "ellipsis":true,
                "key":"quoteUnitPrice_11113173785",
            },
            {
                "width":"100",
                "align":"center",
                "title":"总计(元)",
                "ellipsis":true,
                "key":"quoteTotalPrice_11113173785",
            }
        ]

    },
    {
        "width":"166",
        "align":"center",
        "title":"私人定制",
        "ellipsis":true,
        "key":"supplier_11113173838",
        "children":[
            {
                "width":"100",
                "align":"center",
                "title":"单价(元)",
                "ellipsis":true,
                "key":"quoteUnitPrice_11113173838",
            },
            {
                "width":"100",
                "align":"center",
                "title":"总计(元)",
                "ellipsis":true,
                "key":"quoteTotalPrice_11113173838",
            }
        ]
    }
]

[
    {
        "name":"手动添加",
        "purchaseAmount":"9887.00",
        "quoteTotalPrice_11113173785":"494350.00",
        "supplierId_11113173785":"11113173785",
        "quoteAmount_11113173785":"9887.0000",
        "quoteUnitPrice_11113173785":"50.0000",
        "quoteTotalPrice_11113173838":"988700.00",
        "supplierId_11113173838":"11113173838",
        "quoteAmount_11113173838":"9887.0000",
        "quoteUnitPrice_11113173838":"100.0000"
    },
    {
        "name":"2018年7月9日",
        "purchaseAmount":"1.00",
        "quoteTotalPrice_11113173785":"50.00",
        "supplierId_11113173785":"11113173785",
        "quoteAmount_11113173785":"1.0000",
        "quoteUnitPrice_11113173785":"50.0000",
        "quoteTotalPrice_11113173838":"100.00",
        "supplierId_11113173838":"11113173838",
        "quoteAmount_11113173838":"1.0000",
        "quoteUnitPrice_11113173838":"100.0000"
    },
    {
        "name":" 中国移动取消流量“漫游”费",
        "purchaseAmount":"563.00",
        "quoteTotalPrice_11113173785":"28150.00",
        "supplierId_11113173785":"11113173785",
        "quoteAmount_11113173785":"563.0000",
        "quoteUnitPrice_11113173785":"50.0000"
    },
    {
        "name":" 中国移动取消流量“漫游”费",
        "purchaseAmount":"23.00",
        "quoteTotalPrice_11113173785":"1150.00",
        "supplierId_11113173785":"11113173785",
        "quoteAmount_11113173785":"23.0000",
        "quoteUnitPrice_11113173785":"50.0000",
        "quoteTotalPrice_11113173838":"2300.00",
        "supplierId_11113173838":"11113173838",
        "quoteAmount_11113173838":"23.0000",
        "quoteUnitPrice_11113173838":"100.0000"
    }
]

2. Realisieren Sie die zusammengeführte Spaltenanzeige von [Gesamt]

Der Quellcode der Tabellenkomponente von iview muss hier geändert werden.

• Das Datenformat ist wie folgt: Kontrollzeilen, Kontrollspalten, Kontrolle der Anzahl der Zusammenführungen, Kontrolle der Anzeigedaten

[
    {// 每一条，表示有一行
        "total":"合计", // 展示的数据

        "key":"total", // 表头的key
        "align":"center",
        "ellipsis":true,
        "colspan":"2", // 需要计算合并列的个数
        "tableBody":[ // tableBody.length 表示有多少个值
            {
                "total_11113173785":"523700.00", 

                "key":"total_11113173785",
                "colspan":"2",
                "align":"center",
                "ellipsis":true
            },
            {
                "total_11113173838":"991100.00",
                
                "key":"total_11113173838",
                "colspan":"2",
                "align":"center",
                "ellipsis":true
            }
        ]
    }
]

• das Folgende Es handelt sich um einen modifizierten Quellcode. Er unterstützt derzeit keine Ereignisse wie Mausbewegungen in die Tabelle

     table-body.vue:33

<!-- ++++++++++++++++ 2018年8月7日16:49:00 合并列单元格 start +++++++++++++++++++++ -->
<template>
    <template>
        <table-tr>
            <td>
                <cell></cell>
            </td>
            <template>
                <td>
                    <cell></cell>
                </td>
            </template>
        </table-tr>
    </template>

</template>
<!-- ++++++++++++++++ 合并列单元格 end +++++++++++++++++++++ -->

Verwandte Empfehlungen:

Wie element-ui die Wiederverwendung von Tabellenkomponenten implementiert

So verwenden Sie das On-Change-Attribut in IView

Lösung für die Fehlausrichtung der Option zum Auswählen des Dropdown-Felds in iView

Ausführliche Erklärung der JS-Tabellenkomponenten-Artefakt-Bootstrap-Tabelle (Basisversion)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Tabellenkomponente von iview, um Tabellenspalten zusammenzuführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!