The content of this article is about how to use the Table component of iview to merge the columns of the table. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

iview’s Table component header grouping

iview’s Table component header grouping

Requirement Description

• Merge table header

• Merge columns, display [total]

Final rendering effect

Question

• Header There are duplicate keys, how to match the data

• To implement merged columns-it is necessary to modify the Table component to achieve

1. Merge table header

According to the demo provided by iview, it can be seen that editing the header is relatively easy, and you only need to write it according to the format.

• Problem: There are duplicate keys in the header, how to match the header and table data

• Solution:

Table header key_supplier ID that needs to be grouped
Table data key_supplier ID that needs to be grouped

[
????{
????????"width":"200",
????????"align":"center",
????????"title":"物品名稱(chēng)",
????????"ellipsis":true,
????????"key":"name",
????},
????{
????????"width":"100",
????????"align":"center",
????????"title":"數(shù)量",
????????"ellipsis":true,
????????"key":"purchaseAmount",
????},
????{
????????"width":"166",
????????"align":"center",
????????"title":"lyy369",
????????"ellipsis":true,
????????"key":"supplier_11113173785",
????????"children":[
????????????{
????????????????"width":"100",
????????????????"align":"center",
????????????????"title":"單價(jià)(元)",
????????????????"ellipsis":true,
????????????????"key":"quoteUnitPrice_11113173785",
????????????},
????????????{
????????????????"width":"100",
????????????????"align":"center",
????????????????"title":"總計(jì)(元)",
????????????????"ellipsis":true,
????????????????"key":"quoteTotalPrice_11113173785",
????????????}
????????]

????},
????{
????????"width":"166",
????????"align":"center",
????????"title":"私人定制",
????????"ellipsis":true,
????????"key":"supplier_11113173838",
????????"children":[
????????????{
????????????????"width":"100",
????????????????"align":"center",
????????????????"title":"單價(jià)(元)",
????????????????"ellipsis":true,
????????????????"key":"quoteUnitPrice_11113173838",
????????????},
????????????{
????????????????"width":"100",
????????????????"align":"center",
????????????????"title":"總計(jì)(元)",
????????????????"ellipsis":true,
????????????????"key":"quoteTotalPrice_11113173838",
????????????}
????????]
????}
]

[
????{
????????"name":"手動(dòng)添加",
????????"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":"?中國(guó)移動(dòng)取消流量“漫游”費(fèi)",
????????"purchaseAmount":"563.00",
????????"quoteTotalPrice_11113173785":"28150.00",
????????"supplierId_11113173785":"11113173785",
????????"quoteAmount_11113173785":"563.0000",
????????"quoteUnitPrice_11113173785":"50.0000"
????},
????{
????????"name":"?中國(guó)移動(dòng)取消流量“漫游”費(fèi)",
????????"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. Realize the merged column display of [Total]

You need to change the source code of iview's Table component here.

• The data format is as follows, control rows, control columns, control the number of merges, and control the display data

[
????{//?每一條，表示有一行
????????"total":"合計(jì)",?//?展示的數(shù)據(jù)

????????"key":"total",?//?表頭的key
????????"align":"center",
????????"ellipsis":true,
????????"colspan":"2",?//?需要計(jì)算合并列的個(gè)數(shù)
????????"tableBody":[?//?tableBody.length?表示有多少個(gè)值
????????????{
????????????????"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
????????????}
????????]
????}
]

• The following It is a modified source code. It does not currently support events such as mouse movement into the table.

  ???table-body.vue:33

<!-- ++++++++++++++++ 2018年8月7日16:49:00 合并列單元格 start +++++++++++++++++++++ -->
<template>
????<template>
????????<table-tr>
????????????<td>
????????????????<cell></cell>
????????????</td>
????????????<template>
????????????????<td>
????????????????????<cell></cell>
????????????????</td>
????????????</template>
????????</table-tr>
????</template>

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

Related recommendations:

element-uiHow to reuse Table components

How to use the on-change attribute in IView

Solution to the misalignment of iview's select drop-down box options

JS table component artifact bootstrap table detailed explanation (basic version)

The above is the detailed content of How to use iview's Table component to merge table columns. For more information, please follow other related articles on the PHP Chinese website!