iview table 自定义列_使用iview的Table组件实现合并列demo

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

:row="colSpanColumn"

:key="colSpanColumn.key"

:prefix-cls="prefixCls"

>

:natural-index="Number(colSpanColumnIndex+data.length)"

:index="Number(colSpanColumnIndex+data.length)"

:prefix-cls="prefixCls"

:row="colSpanColumn"

:key="colSpanColumn.key"

:column="colSpanColumn"

>

:natural-index="Number(colSpanBodyIndex+data.length)"

:index="Number(colSpanBodyIndex+data.length)"

:prefix-cls="prefixCls"

:row="colSpanBody"

:key="colSpanBody.key"

:column="colSpanBody"

>

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;

}

}