上 | iview的Table组件合并列demo

文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画

❥❥❥❥点个赞，让我知道你来过~❥❥❥❥

---

【前情提要】

1. 题目 | let和var的区别（一、二）
2. 图解 | let和var的区别（一、二）
3. 题目 | 带VAR和不带VAR的区别
4. 图解 | 带VAR和不带VAR的区别
5. 总结 | LET和VAR区别（三、四）
6. 图解 | 作用域和作用域链
7. 练习题 | 作用域和作用域链
8. 图解 | 理解闭包
9. 案例 | 闭包作用：保护和保存
10. 图解 | 判断条件中的变量提升、私有变量、全局变量、arguments
11. 理解 | 堆内存栈内存释放、null和{}、undefined的区别

【iview】

1. iview低版本实现表格拖拽，滚动条列宽计算问题
2. 案例 | iview中Table：拖拽适配列、自定义固定列、合并列
3. 读源码 | 跟着大佬们学编程思想
4. 上 | iview的Table组件合并列demo
5. 下 | iview的Table组件合并列，升级代码

iview 4.0+更新代码(2020年5月6日)

此处的代码同步需要更新

0 / iview的Table组件表头分组

△15.1 iview的Table组件demo

1 / 需求说明

（1）合并表头

（2）合并列，展示[合计]

△ 15.2 需求demo

3 / 最终呈现的效果

△15.3代码展示的结果

4 / 解决问题

（1）表头有重复的key，数据如何匹配

（2）实现合并列——需要修改Table组件来实现

（3）列头和合并列的匹配

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",
            }
        ]
    }
]

△Table的columns属性

[
    {
        "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"
    }
]

△Table的data属性

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的合并列展示数据

以下是修改的源码，暂时不支持表格的鼠标移入等事件
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 +++++++++++++++++++++ -->

△修改Table组件的源码

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;

    }
}

△合并列的列头和data数据一一对应

5 / 代码地址

分享地址

https://github.com/jingzhaoxia/share/tree/master/iview