使用iview的Table組件實現合併列demo

iview的Table組件表頭分組

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

<!-- ++++++++++++++++ 2018年8月7日16:49:00 合併列單元格 start +++++++++++++++++++++ -->
<template v-if="(index+1)==data.length">
    <template v-for="(colSpanColumn, colSpanColumnIndex) in colSpanColumns">
        <table-tr
            :row="colSpanColumn"
            :key="colSpanColumn.key"
            :prefix-cls="prefixCls"

        >
            <td :colspan="colSpanColumn.colspan" :class="alignCls(colSpanColumn, colSpanColumn.tableBody)">
                <Cell
                    :natural-index="Number(colSpanColumnIndex+data.length)"
                    :index="Number(colSpanColumnIndex+data.length)"
                    :prefix-cls="prefixCls"
                    :row="colSpanColumn"
                    :key="colSpanColumn.key"
                    :column="colSpanColumn"
                ></Cell>
            </td>
            <template v-for="(colSpanBody, colSpanBodyIndex) in colSpanColumn.tableBody"  :class="alignCls(colSpanColumn, colSpanBody)">
                <td :colspan="colSpanBody.colspan" :class="alignCls(colSpanBody, colSpanBody)">
                    <Cell
                        :natural-index="Number(colSpanBodyIndex+data.length)"
                        :index="Number(colSpanBodyIndex+data.length)"
                        :prefix-cls="prefixCls"
                        :row="colSpanBody"
                        :key="colSpanBody.key"
                        :column="colSpanBody"
                    ></Cell>
                </td>
            </template>
        </table-tr>
    </template>

</template>
<!-- ++++++++++++++++ 合併列單元格 end +++++++++++++++++++++ -->

三、合併列的數據與列頭的匹配（2019年5月29日）

• 問題：最後一行的合併列的數據，是修改了源碼添加的。因此，沒有跟列頭產生關聯。
• 解決：以下代碼 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;

                }
            }

交流