bootstrap-table 多层组合表头

如下图所示的二层组合表头

来人,上代码!

javascript 复制代码
table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'id',
    search: false,
    showToggle: false,
    showColumns: false,
    showExport: false, commonSearch: false,
    columns: [
        [
            {field: 'nickname', title: __('昵称'), valign:"middle", align:"center", colspan: 1, rowspan: 2, operate: false},
            {field: 'createtime',title: __('创建时间'),autocomplete: false,valign:"middle",align:"center",colspan: 1,rowspan: 2,formatter: Table.api.formatter.datetime, operate: false},
            {title: "今日数据",valign:"middle", align:"center", colspan: colspan(), rowspan: 1,visible: visible()},
        ],[
            {field: 'money_sum_today', title: __('微信'), operate: false,align:'center',halign:"center",visible: visible()},
            {field: 'score_sum_today', title: __('支付宝'), operate: false,align:'center',halign:"center",visible: visible()},
        ],
    ]
});

要点讲解:

columns下每一个数组代表一层

像图中的例子,昵称和创建时间没有二层表头,需要将rowspan字段设为2,当遇到第一个rowspan为1的一层表头,二层表头就会从这里开始罗列显示

相关推荐
代码搬运媛3 小时前
Jest 测试框架详解与实现指南
前端
counterxing4 小时前
我把 Codex 里的 Skills 做成了一个 MCP,还支持分享
前端·agent·ai编程
wangqiaowq4 小时前
windows下nginx的安装
linux·服务器·前端
之歆4 小时前
DAY_12JavaScript DOM 完全指南(二):实战与性能篇
开发语言·前端·javascript·ecmascript
发现一只大呆瓜5 小时前
Vite凭什么这么快?3分钟带你彻底搞懂 Vite 热更新的幕后黑手
前端·面试·vite
Maimai108085 小时前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
kyriewen6 小时前
产品经理把PRD写成“天书”,我用AI半小时重写了一遍,他当场愣住
前端·ai编程·cursor
humcomm7 小时前
元框架的工作原理详解
前端·前端框架
canonical_entropy7 小时前
Attractor Before Harness: AI 大规模开发的方法论
前端·aigc·ai编程
zhangxingchao8 小时前
多 Agent 架构到底怎么选?从 Claude Agent Teams、Cognition/Devin 到工程落地原则
前端·人工智能·后端