# 多级表头合并

**Repository Path**: Luomenghao/multi-level-header-merging

## Basic Information

- **Project Name**: 多级表头合并
- **Description**: 多层级表头合并demo
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-04-17
- **Last Updated**: 2023-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 原生Table动态表头合并

在日常开发中，你是否有遇到表格多级表头需求，如果是数据死的，相信大家还可以手动去设置 colspan/rowspan 属性来达到合并的效果，如果是动态的数据呢？就要各种计算当前单元格格的colspan/rowspan，下面我就分享一下我遇到的需求吧！

前言：
动态表头的关键字无非就是在单元格上面设置 colspan/rowspan，不清楚的同学可以去MDN上看看 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th

数据源
```javascript
const header = [
    { key: "idx", label: "序号",type:'input' },
    { label: "用户信息",children:[
        { key: "name", label: "姓名",type:'input'},
        { label: "居住地址",children:[
            { key: "province", label: "省份",type:'input'},
            { key: "city", label: "市区", type: 'input' },
            { key: "county", label: "区县",type:'input'},
            { key: "address", label: "详细<br/>地址",type:'input'},
        ]},
    ]},
    { key: "remark", label: "备注信息" },
    { key: "create_time", label: "创建时间" },
]
```
产品的要求是，通过这个数据生成动态表头