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

haoguo 發布于2019-08-26 12:10 / 1707人閱讀

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

iview的Table組件表頭分組

iview的Table組件表頭分組

需求說明

合并表頭

合并列，展示[合計]

最終呈現的效果

問題

表頭有重復的key，數據如何匹配

實現合并列——需要修改Table組件來實現

列頭和合并列的匹配

1、合并表頭

根據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"
    }
]

2、實現[合計]的合并列展示

此處需要更改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

3、合并列的數據與列頭的匹配（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;

                }
            }

GPU云服務器云服務器 table合并合并列列合并 table單元格選中合并

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108152.html

iview Table表格組件無法拆分單元格的解決思路

摘要：因為我們項目中首要的是單元格拆分的，因此以拆分為例。使用函數對表格組件的表格列配置數據進行動態改造，普通單元格渲染標簽呈現數據，要拆分的單元格渲染原生標簽最后隱藏嵌套表格的邊框及調整相關原生表格樣式。最近在開發的Vue項目中，使用了iview第三方UI庫;對于表格組件的需求是最多的，但是在一些特定場景下，發現iview的表格組件沒有單元格合并與拆分的API，搜了一下發現很多同學提問關...

songze 2019-08-23 11:46 評論0 收藏0
iview 使用總結

摘要：開發后臺系統問題總結項目參考了用了包裹頁面進行緩存點擊可切換不會重新渲染在特定頁面比如詳情頁需要每次刷新的時候添加進行相關的刷新導致了另外一個問題最初跳轉時用的傳參刷新參數就沒了特改為傳參涉及到關閉點擊等多個問題用存儲數據并做了最大限 vue+iview 開發后臺系統問題總結項目參考了iview-admin tags 用了keep-alive 包裹 router-view,頁面進行...

王陸寬 2019-08-23 10:51 評論0 收藏0
iView 發布 3.0 版本，以及開發者社區等 5 款新產品

摘要：相對時間組件錨點組件面板分割組件分割線組件單元格組件相對時間組件用于表示幾分鐘前幾小時前等相對于此時此刻的時間描述。單元格組件在手機上比較常見，在上則常用于固定的側邊菜單項。開發者社區這是發布會最勁爆的一款產品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我們成功地召開了 iView 3...

FreeZinG 2019-08-23 10:31 評論0 收藏0
uniapp table 組件

摘要：最近在搗鼓項目，恰好用到組件，之前寫了個，后面一直都想寫一個像樣的，可以分享給別人用的組件。自己的水平一般，開發出來的組件可能代碼不咋地，還望路過大神斧正。 uniapp是2019年非常的火爆的一個Dcloud開發跨平臺前端工具，支持ios android wap，小程序，除了android有點卡外，其他暫時沒有發現什么瑕疵。最近在搗鼓uniapp項目，恰好用到table組件，之前...

Vultr 2019-08-26 10:35 評論0 收藏0