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的一层表头,二层表头就会从这里开始罗列显示

相关推荐
张就是我10659212 小时前
DOMPurify 的一个漏洞:你以为 {} 是空的?
前端
疯狂的魔鬼13 小时前
一套 Schema 驱动四视图:记 useCrudSchemas 的设计与实践
前端·javascript·typescript
风骏时光牛马13 小时前
大模型开发工具高频故障与实操问题汇总代码案例大全
前端
没落英雄13 小时前
2. 让 Agent 能读写文件、执行命令 —— LocalShellBackend 实战
前端·人工智能·架构
白雾茫茫丶13 小时前
探索 Nuxt.js 全栈能力:用 Better-Auth 打造类型安全的 RBAC 权限系统
前端·vue.js·nuxt.js
奇奇怪怪的13 小时前
检索增强——混合检索、Re-rank 与 Query 优化
前端
user622298649258113 小时前
React 常用技术知识全景:从组件到 Hooks 的系统理解
前端
麻辣凉茶13 小时前
给阿嬤一封来自云端的信(上)
前端·node.js
前端缘梦13 小时前
LangGraph 实战:从 0 到 1 构建 AI 代码生成工作流
前端·程序员·全栈