使用iview的Table组件实现合并列demo

摘要：问题表头有重复的，表头和表数据如何匹配解决需要分组的表头供货人需要分组的表数据供货人物品名称数量单价元总计元私人定制单价元总计元手动添加年月日中国移动取消流量漫游费中国移动取消流量漫游费实现合计的合并列展示此处需要更改的组件的源码。

iview的Table组件表头分组

合并表头

合并列，展示[合计]

表头有重复的key，数据如何匹配

实现合并列——需要修改Table组件来实现

列头和合并列的匹配

根据iview提供的demo可以看出，表头的编辑是比较容易的，只需要根据格式编写即可。

问题：表头有重复的key，表头和表数据如何匹配

解决：

   需要分组的表头 key_供货人ID
   需要分组的表数据 key_供货人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"
    }
]

此处需要更改iview的Table组件的源码。

数据格式如下，控制行，控制列，控制合并个数，控制展示数据

[
    {// 每一条，表示有一行
        "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
            }
        ]
    }
]

以下是修改的源码，暂时不支持表格的鼠标移入等事件

   table-body.vue:33

问题：最后一行的合并列的数据，是修改了源码添加的。所以，没有跟列头产生关联。

解决：如下代码 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 因为目前的数据都只有一条合并列的数据。先写死第0个。后续增加了，再改
                        this.colSpanColumns[0].tableBody.forEach((item, index)=>{
                            if(item.key==this.columns[i].key)
                            {
                                finshData.push(item);
                            }
                        });
                    }
                    this.colSpanColumns[0].tableBody=finshData;

                }
            }