更新记录

1.0.0（2024-10-12）下载此版本

多级表头table渲染，仅仅作表格数据渲染，有表头合并、固定表头、固定列功能，没有单元格合并、编辑、多选等操作、介意的请勿下载！！！

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	√	√	√	√	×	×	√	√

bcxc-muti-level-table

多级表头table渲染，仅仅作表格数据渲染，有表头合并、固定表头、固定列功能，没有单元格合并、编辑、多选等操作、介意的请勿下载！！！

开发初衷：

许多业务需要使用表格进行数据展示，但uni-table又不支持表头合并，所以才尝试开发，分享出来也只是单纯想看看有没有人用。

使用阅读：介意的请勿下载！！！

1、此组件实现原理是基于H5的

标签做的，仅支持安卓app、H5，兼容性的话没有去做大量测试，正常情况下应该是没有问题的。由于小程序的特性，无法在各类小程序平台使用。

2、此组件没有太多的功能，仅支持多级表头展示、多级表头合并、固定表头、固定列、使用格式化函数回显单元格数据。至于为什么没有其他功能的话，因为本人懒，还没此类业务需求。

3、header格式是参照el-table的数据格式来处理的，当前你也可以直接使用table>tr>td自己渲染生成。

4、其他扩展功能目前没考虑做，做了会更新。也可以留言，根据自己能力，我会试试看。

使用较为简单，可以下载示例参照使用：

<bcxc-muti-level-table ref="mutiLevelTable" :tableHeader="headers" :table-data="dataList" :fixed-columns="[0]"></bcxc-muti-level-table>

header = [
    {
        label: "废物名称",
        prop: "wasteName",
        width: 80,
        children: [
            {
                label: "泛称",
                prop: "wasteName",
            },
            {
                label: "别名",
                prop: "wasteAliasName",
            }
        ]

    },
    {
        label: "废物代码",
        prop: "wasteCode",
        width: 80,
        children: [
            {
                label: "大类代码",
                prop: "wasteBigCode",
                children: [
                    {
                        label: "大类代码-1",
                        prop: "wasteBigCode1",
                        children: [
                            {
                                label: "大类代码11",
                                prop: "wasteBigCode11",
                            },
                            {
                                label: "大类代码12",
                                prop: "wasteBigCode12",
                            },
                        ]
                    },
                    {
                        label: "大类代码-2",
                        prop: "wasteBigCode2",
                    },
                ]
            },
            {
                label: "小类代码",
                prop: "wasteSmallCode",
                children: [
                    {
                        label: "小类代码-1",
                        prop: "wasteSmallCode1",
                    },
                    {
                        label: "小类代码-2",
                        prop: "wasteSmallCode2",
                    },
                ]
            }
        ]
    },
    {
        label: "危险特性",
        prop: "wasteDanger",
        width: 80,
        children: [
            {
                label: "危险特性-1",
                prop: "wasteDanger1",
            },
            {
                label: "危险特性-2",
                prop: "wasteDanger2",
            },

        ]
    },
    {
        label: "包装方式",
        width: 80,
        prop: "wastePackingType",
    },
    {
        label: "包装物数量",
        width: 80,
        prop: "packageNum",
    },
    {
        label: "产生量",
        width: 80,
        prop: "prodWeight",
        unit: "Kg",
    },
    {
        label: "自定义计算",
        width: 80,
        prop: "customCalculations",
        //用于自定义计算或回显值
        format: (row, idx) => {
            return (idx * 80) + "kg";
        },
        unit: "Kg",
    },
]