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

Pink
文 / 景朝霞
来源公号 / 朝霞的光影笔记
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组件合并行/列

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

公号ID:zhaoxiajingjing

△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
}]

△一条合并行的数据

需要展示在一行上:

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

公号ID:zhaoxiajingjing

阅读 458

朝霞的光影笔记
公号首发:朝霞的光影笔记 ID:zhaoxiajingjing →→→→ 多学一点知识,就少写一行代码

没有什么是20遍解决不了的,如果有~那就再写20遍

255 声望
12 粉丝
0 条评论
你知道吗?

没有什么是20遍解决不了的,如果有~那就再写20遍

255 声望
12 粉丝
宣传栏