bootstrap-table复杂表头的实现

最新推荐文章于 2025-09-14 03:41:22 发布

转载最新推荐文章于 2025-09-14 03:41:22 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/Baby_pw/article/details/92803054

Bootstrap 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了一个复杂的表格布局设计，包括多个层级的标题行、合并单元格等特性，旨在展示如何在网页中实现精细的数据展示效果。

效果图：

代码：

columns: [[
                {
                    title: '销售大区',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '区域',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '经销商',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '期前欠款',
                    align: 'center',
                    colspan: 4
                }, {
                    title: '2016年发车数量',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '2016年销售明细',
                    align: 'center',
                    colspan: 12
                }, {
                    title: '账上目前预付款',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '截止2016年欠款',
                    align: 'center',
                    rowspan: 3
                }, {
                    title: '2016收款',
                    align: 'center',
                    rowspan: 3
                }
            ],
                [{
                    field: 'userPhone',
                    title: '销售发车',
                    align: "center",
                    colspan: 3
                }, {
                    field: 'userEmail',
                    title: '款转为2017年预付款',
                    align: "center",
                    rowspan: 2
                }, {
                    field: 'userBalance',
                    title: '2016年合同货值',
                    align: "center",
                    colspan: 3
                }, {
                    field: 'status',
                    title: '其他费用',
                    align: "center",
                    colspan: 3
                }, {
                    title: '代付运费',
                    align: 'center',
                    colspan: 3
                }, {
                    title: '2016年货后客户逾期)',
                    align: 'center',
                    colspan: 3
                }
                ],
                [{
                    field: 'userPhone',
                    align: "center",
                    title: '应收'
                }, {
                    field: 'userEmail',
                    align: "center",
                    title: '实收'
                }, {
                    field: 'userBalance',
                    align: "center",
                    title: '欠款'
                }, {
                    field: 'status',
                    align: "center",
                    title: '应收'
                }, {
                    align: 'center',
                    title: '实收'
                }, {
                    field: 'userPhone',
                    align: "center",
                    title: '欠款'
                }, {
                    field: 'userEmail',
                    align: "center",
                    title: '应收'
                }, {
                    field: 'userBalance',
                    align: "center",
                    title: '实收'
                }, {
                    field: 'status',
                    align: "center",
                    title: '欠款'
                }, {
                    field: 'status',
                    align: "center",
                    title: '应收'
                }, {
                    field: 'userPhone',
                    align: "center",
                    title: '实收'
                }, {
                    field: 'userEmail',
                    align: "center",
                    title: '欠款'
                }, {
                    field: 'userBalance',
                    align: "center",
                    title: '应收'
                }, {
                    field: 'status',
                    align: "center",
                    title: '实收'
                }, {
                    field: 'status',
                    align: "center",
                    title: '欠款'
                }
                ]
            ]