datagrid合并表头单元格

效果如下:
效果图
源码如下:

rowspan: 2 (表示该列跨两行)
colspan: 2 (表示跨两列)
(以下代码有重复部分已省略,仅以实现功能展示效果为主)

 columns: [
            [
                { field: 'forecast',  title: '预估出货量', rowspan: 2, align: 'center',  titleAlign: true },
                { field: 'solution', title: '方案选择', rowspan: 2, align: 'center', titleAlign: true,
                    editor: {  options: {valueField: 'docTypeCn', textField: 'docTypeCn', panelHeight: 'auto'}
                        type: 'textbox', options: {readonly:true} }  },
                {field: 'cost', title: '场地占用成本', colspan: 2,rowspan: 1,align: 'center',  titleAlign: true,
                    editor: {type: 'textbox', options: {required: true}}},
                {field: 'human', title: '人力投入',  colspan: 3, rowspan: 1,  align: 'center', titleAlign: true,
                 editor: {type: 'textbox', options: {required: true}}},
                { field: 'device', title: '设备投资',  colspan: 4,  rowspan: 1,align: 'center',  titleAlign: true,editor: {type: 'textbox', options: {required: true}} },
                    { field: 'mOutput',   title: '月产能',   width: 10, rowspan: 2, align: 'center',  titleAlign: true,editor: { type: 'textbox'}},
                    {field: 'unitCost',title: '单位成本', width: 10,rowspan: 2,align: 'center',titleAlign: true,editor: { type: 'textbox'}},  
            ],[
                {field: 'needArea', title: '所需面积',  rowspan: 1, align: 'center', titleAlign: true,  editor: { type: 'textbox'}}, {  field: 'areaMde', title: '月折旧',rowspan: 1, align: 'center', titleAlign: true,editor: {type: 'textbox'}  },
                { field: 'operatorLevel',  title: '人员类别',  rowspan: 1, align: 'center',   titleAlign: true,  editor: { type: 'textbox'} // disabled: true  },
                {  field: 'number',  title: '人数',   rowspan: 1,  align: 'center', titleAlign: true,  editor: { type: 'textbox'}// disabled: true  },
                { field: 'mCost',title: '月薪资',rowspan: 1,align: 'center',titleAlign: true, editor: { type: 'textbox'}  // disabled: true },
                { field: 'eipType', title: '设备投资方式', rowspan: 1,align: 'center', titleAlign: true,editor: { type: 'textbox'} // disabled: true },
                {field: 'eipAmound', title: '设备投资总额', rowspan: 1,align: 'center',  titleAlign: true,editor: { type: 'textbox'}// disabled: true },
                { field: 'eMde', title: '月折旧', rowspan: 1,align: 'center',titleAlign: true,editor: { type: 'textbox'}  // disabled: true },
                { field: 'weaCost', title: '水、电、气', rowspan: 1,
                    align: 'center', titleAlign: true,editor: { type: 'textbox'}// disabled: true },
                ]

        ],

其他可参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容