如何利用iview的Table组件实现将表格的列合并

本篇文章给大家带来的内容是关于如何利用iview的Table组件实现将表格的列合并,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

iview的Table组件表头分组

iview的Table组件表头分组

4244215053-5b7260ca50999_articlex.png

需求说明

  • 合并表头

  • 合并列,展示[合计]

2487523976-5b726785aff4c_articlex.png

最终呈现的效果

285380375-5b726be465fd5_articlex.png

问题

  • 表头有重复的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、实现[合计]的合并列展示

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: