摘要：問題表頭有重復(fù)的，表頭和表數(shù)據(jù)如何匹配解決需要分組的表頭供貨人需要分組的表數(shù)據(jù)供貨人物品名稱數(shù)量單價(jià)元總計(jì)元私人定制單價(jià)元總計(jì)元手動(dòng)添加年月日中國移動(dòng)取消流量漫游費(fèi)中國移動(dòng)取消流量漫游費(fèi)實(shí)現(xiàn)合計(jì)的合并列展示此處需要更改的組件的源碼。

iview的Table組件表頭分組

合并表頭

合并列，展示[合計(jì)]

表頭有重復(fù)的key，數(shù)據(jù)如何匹配

實(shí)現(xiàn)合并列——需要修改Table組件來實(shí)現(xiàn)

列頭和合并列的匹配

根據(jù)iview提供的demo可以看出，表頭的編輯是比較容易的，只需要根據(jù)格式編寫即可。

問題：表頭有重復(fù)的key，表頭和表數(shù)據(jù)如何匹配

解決：

   需要分組的表頭 key_供貨人ID
   需要分組的表數(shù)據(jù) key_供貨人ID

[
    {
        "width":"200",
        "align":"center",
        "title":"物品名稱",
        "ellipsis":true,
        "key":"name",
    },
    {
        "width":"100",
        "align":"center",
        "title":"數(shù)量",
        "ellipsis":true,
        "key":"purchaseAmount",
    },
    {
        "width":"166",
        "align":"center",
        "title":"lyy369",
        "ellipsis":true,
        "key":"supplier_11113173785",
        "children":[
            {
                "width":"100",
                "align":"center",
                "title":"單價(jià)(元)",
                "ellipsis":true,
                "key":"quoteUnitPrice_11113173785",
            },
            {
                "width":"100",
                "align":"center",
                "title":"總計(jì)(元)",
                "ellipsis":true,
                "key":"quoteTotalPrice_11113173785",
            }
        ]

    },
    {
        "width":"166",
        "align":"center",
        "title":"私人定制",
        "ellipsis":true,
        "key":"supplier_11113173838",
        "children":[
            {
                "width":"100",
                "align":"center",
                "title":"單價(jià)(元)",
                "ellipsis":true,
                "key":"quoteUnitPrice_11113173838",
            },
            {
                "width":"100",
                "align":"center",
                "title":"總計(jì)(元)",
                "ellipsis":true,
                "key":"quoteTotalPrice_11113173838",
            }
        ]
    }
]

[
    {
        "name":"手動(dòng)添加",
        "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":" 中國移動(dòng)取消流量“漫游”費(fèi)",
        "purchaseAmount":"563.00",
        "quoteTotalPrice_11113173785":"28150.00",
        "supplierId_11113173785":"11113173785",
        "quoteAmount_11113173785":"563.0000",
        "quoteUnitPrice_11113173785":"50.0000"
    },
    {
        "name":" 中國移動(dòng)取消流量“漫游”費(fèi)",
        "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"
    }
]

此處需要更改iview的Table組件的源碼。

數(shù)據(jù)格式如下，控制行，控制列，控制合并個(gè)數(shù)，控制展示數(shù)據(jù)

[
    {// 每一條，表示有一行
        "total":"合計(jì)", // 展示的數(shù)據(jù)

        "key":"total", // 表頭的key
        "align":"center",
        "ellipsis":true,
        "colspan":"2", // 需要計(jì)算合并列的個(gè)數(shù)
        "tableBody":[ // tableBody.length 表示有多少個(gè)值
            {
                "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
            }
        ]
    }
]

以下是修改的源碼，暫時(shí)不支持表格的鼠標(biāo)移入等事件

   table-body.vue:33

問題：最后一行的合并列的數(shù)據(jù)，是修改了源碼添加的。所以，沒有跟列頭產(chǎn)生關(guān)聯(lián)。

解決：如下代碼 table.vue:1038 在 watch 添加代碼

             // 2019年5月17日16:01:58 整理 colSpanColumns
            colSpanColumns(newData, oldData){
                if(newData.length>0)
                {
                    let finshData=[];

                    for (let i in this.columns) {
                        // 2019年5月17日16:07:29 因?yàn)槟壳暗臄?shù)據(jù)都只有一條合并列的數(shù)據(jù)。先寫死第0個(gè)。后續(xù)增加了，再改
                        this.colSpanColumns[0].tableBody.forEach((item, index)=>{
                            if(item.key==this.columns[i].key)
                            {
                                finshData.push(item);
                            }
                        });
                    }
                    this.colSpanColumns[0].tableBody=finshData;

                }
            }