vxe-table 反转行列，并实现组合列头和列合计

vxe-table 如何反转行列，并实现组合列头与列合计？

在做财务系统时，经常遇到列为动态值，行相对固定的情况，这种时候就需要用到行列反转。

首先页面插入vxe-grid高级表格，定义好ref

<vxe-grid class="reverse-table" ref="htcForm01"  v-bind="htc01Options"></vxe-grid>

数据类型里定义好htc01Options

htc01Options: {
                border: true,
                showOverflow: false,
                height:900,
                showHeader: true,
                columns: [],
                data: []
              }

构造函数reverseTable(columns,list)

reverseTable (columns, list) {
              const buildData = columns.map(column => {
              const item ={ subject: column.title }
                    list.forEach((row, index) => {
                        item[row.proCode] = row[column.field]
              
                    })
            item.total=parseFloat(_.sumBy(list,column.field).toFixed(2))
            //创建合计列，计算求和
            return item
              })
            
              const buildColumns = [{
                field: 'subject',
                fixed: 'left',
                title: '费用科目',
                width: 220
              }]

              list.forEach((item, index) => {
                buildColumns.push({
                    title: item.proCode,
                    align:'center',
                    children: [
                      {
                        title: item.name,
                        align:'center',
                        children: [
                          { field:item.proCode, 
                            params:{
                              proCode:item.proCode,
                              proName:item.name,
                              proTime:Moment((item.startdate 8*3600)*1000).format('YY年M月D日') '~' Moment((item.enddate 8*3600)*1000).format('YY年M月D日'),
                            },
                            align:'center',
                            title: Moment((item.startdate 8*3600)*1000).format('YY年M月D日') '~' Moment((item.enddate 8*3600)*1000).format('YY年M月D日'), 
                            minWidth:150, }

                        ]
                      }
                    ]
                  })
              })
              buildColumns.push({
                    title: '合计',
                    align:'center',
                    field:'total',
                    fixed:'right',
                    width: 120
              })

              this.htc01Options.data = buildData
              this.htc01Options.columns = buildColumns
    }

获取表内数据后，用构造函数反转行列，即可实现反转效果

const myColumns = [
                  { field: 'inTotal', title: '内部研究开发投入额' },
                  { field: 'fee1', title: '1.人员人工' },
                  { field: 'fee11', title: '1.1 -人员工资' },
                  { field: 'fee121', title: '1.2.1 -社保费用' },
                  { field: 'fee122', title: '1.2.2 -公积金' },
                  { field: 'fee13', title: '1.3 -外聘科技人员费用' },
                  { field: 'fee2', title: '2.直接投入' },
                  { field: 'fee21', title: '2.1 -材料' },
                  { field: 'fee22', title: '2.2 -燃料' },
                  { field: 'fee23', title: '2.3 -水电煤气' },
                ]
                const myData = res.data //res.data数据通过接口传入
                
                this.reverseTable(myColumns, myData)
                

实现效果如下表，列为动态数据，行为预先设定

这篇好文章是转载于：学新通技术网