下 | iview的Table組件合併列，升級代碼

文 / 景朝霞
來源公號 / 朝霞的光影筆記
ID / zhaoxiajingjing
圖 / 本身畫

❥❥❥❥點個贊，讓我知道你來過~❥❥❥❥

---

【前情提要】

1. 題目 | let和var的區別（1、二）
2. 圖解 | let和var的區別（1、二）
3. 題目 | 帶VAR和不帶VAR的區別
4. 圖解 | 帶VAR和不帶VAR的區別
5. 總結 | LET和VAR區別（3、四）
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 jing_zhaoxia@sina.com
         * 合併列單元格
         */
        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
}]

△一條合併行的數據

須要展現在一行上：

一、合併列的列頭：列頭+列頭的title

二、合併列的數據：與Table的列頭一一對應

一、合併列的列頭

{
    "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展現

二、合併列的數據

"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...