下 | iview的Table组件合并列，升级代码

文 / 景朝霞
来源公号 / 朝霞的光影笔记
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组件合并列，升级代码

0 / 需求

iview的Table组件展示合并列

https://www.iviewui.com/compo...

△16.1iview的Table组件合并行/列

需求更多的是希望这样展示

△16.2需求

1 / 修改源码

iview最新的Table组件的table-body.vue修改了，同样，在原有基础上同步修改后。

【PS：这里没有加上鼠标的事件，纯展示】

// y-table/table-body.vue:350
render (h) {
    // ...CODE
    let $tableTrColspanArr = [];
    this.data.forEach((row, index) => {
        // ...CODE

        /**
         * 2020年3月31日09:25:44 by [e-mail]
         * 合并列单元格
         */
        if((index+1) === this.data.length) {
            let $tdColspanTitle = null;

            this.colSpanColumns.forEach((colSpanColumn, colSpanColumnIndex)=>{
                // tr 里面放td：表头和值
                let $tdsColspan = [],
                    $tbodyColspan = colSpanColumn.tableBody,
                    bodyLength = $tbodyColspan.length;

                let $tableCellColspanTitle = h(TableCell, {
                    props: {
                        fixed: this.fixed,
                        'prefix-cls': this.prefixCls,
                        row: colSpanColumn,
                        column: colSpanColumn,
                        'natural-index': Number(colSpanColumnIndex+this.data.length),
                        index: Number(colSpanColumnIndex+this.data.length)
                    },
                    key: colSpanColumn.key,
                });

                $tdColspanTitle = h('td', {
                    attrs:{
                        colspan:colSpanColumn.colspan,
                    },
                    class: this.alignCls(colSpanColumn, $tbodyColspan)
                }, [$tableCellColspanTitle]);

                if (bodyLength>0) {
                    // 第一个是表头，后面的是值
                    let $tableCellColspan = null;
                    $tbodyColspan.forEach((colSpanBody, colSpanBodyIndex) => {
                        $tableCellColspan = h(TableCell, {
                            props: {
                                fixed: this.fixed,
                                'prefix-cls': this.prefixCls,
                                row: colSpanBody,
                                column: colSpanBody,
                                'natural-index': Number(colSpanBodyIndex+this.data.length),
                                index: Number(colSpanBodyIndex+this.data.length),
                            },
                            key: colSpanBody.key,
                        });
                        $tdsColspan.push(h('td', {
                            attrs:{
                                colspan:colSpanBody.colspan,
                            },
                            class: this.alignCls(colSpanBody, colSpanBody)
                        }, [$tableCellColspan]));
                    });
                }

                let $tableTrColspan = h(TableTr, {
                    props:{
                        draggable: this.draggable,
                        row:colSpanColumn,
                        'prefix-cls':this.prefixCls
                    },
                    key:colSpanColumn.key
                }, [$tdColspanTitle, ...$tdsColspan]);

                $tableTrColspanArr.push($tableTrColspan);
            });
        }
    });

    const $tbody = h('tbody', {
        class: this.prefixCls + '-tbody'
    }, [$tableTrs, ...$tableTrColspanArr]);

    return h('table', {
        attrs: {
            cellspacing: '0',
            cellpadding: '0',
            border: '0'
        },
        style: this.styleObject
    }, [$colgroup, $tbody]);
}

△table-body.vue展示合并列的数据

2 / 分析数据

"colspan": [{
    "tableBody": [{
        "className": "colSpanClass",
        "colspan": 1,
        "supplier_2020001": "79730826111.00",
        "supplierId": "2020001",
        "align": "center",
        "key": "supplier_2020001"
    },{

        "className": "colSpanClass",
        "colspan": 1,
        "supplier_2020002": "1123.00",
        "supplierId": "2020002",
        "align": "center",
        "key": "supplier_2020002"
    }],
    "total": "合计（元）",
    "className": "colSpanClass",
    
    "key": "total",
    "align": "center",
    "colspan": 2
}]

△一条合并行的数据

需要展示在一行上：

1、合并列的列头：列头+列头的title

2、合并列的数据：与Table的列头一一对应

1、合并列的列头

{
    "key": "total", // KEY
    "align": "center", // ALIGN
    "colspan": 2 // COLSPAN 需要合并的列数
}

△合并列的列头

column

（1）列头展示在表格数据里面，不需要title

（2）需要data里面的值来展示

（3）保留columns的属性都可以使用

data

{
    "total":"合计（元）"
}

△合并列的列头的数据

以上写在一起

{
    "key": "total", // KEY
    "align": "center", // ALIGN
    "colspan": 2, // COLSPAN 需要合并的列数
        
     "total":"合计（元）"
}

△合并列的column

△16.3图解合并列的column展示

2、合并列的数据

"tableBody": [{
    "className": "colSpanClass",
    "colspan": 1,
    "supplier_2020001": "79730826111.00",
    "supplierId": "2020001",
    "align": "center",
    "key": "supplier_2020001"
},{
    "className": "colSpanClass",
    "colspan": 1,
    "supplier_2020002": "1123.00",
    "supplierId": "2020002",
    "align": "center",
    "key": "supplier_2020002"
}]    

△合并列的data数据

column

{
    "align": "center",
    "key": "supplier_2020001"
}

△合并列里面的column

data

{
    "className": "colSpanClass",
    "colspan": 1,
    "supplier_2020002": "1123.00",
    "supplierId": "2020002"
}

△合并列里面的data

以上写在一起

{
    "className": "colSpanClass",
    "colspan": 1,
    "supplier_2020001": "79730826111.00",
    "supplierId": "2020001",
    "align": "center",
    "key": "supplier_2020001"
}

△一条完整的数据

3 / 代码地址

分享地址

https://github.com/jingzhaoxi...