vxe-grid 表格头标题设置及内容合并列项

1、vxe-grid 表格的高级使用： 自定义表格表头标题动态添加，内容列有合并项；实现效果如下所示：

 2、vxe-grid 代码部分设置，实现合并有两种方式可以根据情况自由选定合并方式，代码如下；

 <!--   :span-method="mergeRowMethod"  -->
<vxe-grid
            border
            ref="xGrid" 
            class="moz-style taskTable"
            row-class-name="my-vxe-table-row"
            resizable 
            :scroll-x="{enable: true}"
            :scroll-y="{enable: true}"
            :scrollToLeftOnChange="false" 
            :max-height="600"
            :loading="table.loading"  
            :columns="table.columns" 
            :data="table.dataSource"  
            :edit-config="table.editConfig"
            :menu-config="table.rightMenu" 
            :merge-cells="table.mergeCells" 
            @menu-click="menuClick"
            @edit-closed="editClosedEvent"
            @cell-click="fiveToggle" 
            >  
            <template #xh="{ row }">
                <span v-if="!row.isDictType" class="bl-center">{{ row.xh }}</span>
                <span v-if="row.isDictType" class="bl-left">{{ row.xh }}</span>
            </template>
            <template #text_edit="{ row, column }">
                <vxe-input v-if="!row.isDictType" v-model="row[column.field]" :type="column.fieldtype || 'text'"></vxe-input>
            </template>
            <template #date_edit="{ row, column }">
                <vxe-input v-model="row[column.field]" type="date" placeholder="请选择日期时间" transfer @change="handleSubmitSave($event, row, column)"></vxe-input> 
            </template>
            <template #list_default="{ row, column }"> 
                 <span class="bl-center"> {{ DictSearch(row, column) }} </span>
            </template> 
            <template #list_edit="{ row, column }">
                <vxe-select v-if="!row.isDictType" v-model="row[column.field]" transfer clearable :placeholder="'请选择' + column.title">
                    <vxe-option v-for="(item, index) in fxList" :key="index" :value="item.value" :label="item.text"></vxe-option>
                </vxe-select> 
            </template> 
        </vxe-grid> 

3、js 数据设置及方法设置实现，如下所示：

// 数据内容设置
data(){
      return {
        fxList: [], 
        table:{
            loading: false,
            mergeCells:[],
            rightMenu: {
                className: 'my-menus',
                body: {
                    options: [
                        [
                            { code: 'addRowOne', name: '新增' },
                            { code: 'handleDelete', name: '删除' }, 
                        ]
                    ]
                }, 
            },
            isEdit: false,
            editConfig: { 
                trigger: 'click', 
                mode: 'cell', 
                showIcon:false,
                activeMethod : this.activeCellMethod
            },
            columns: [
            { title: '任务工作台',
                align: 'center',
                children: [] , //注：其他表格头设置在 children 内设置列项即可
            } 
            ],  
            dataSource: [],
        }, 
      }
  },

// 方法设置
        // 通用行合并函数（将相同多列数据合并为一行）
       mergeRowMethod({ row, _rowIndex, column, visibleData }) {
           let that = this
           // console.log(row, _rowIndex, column, visibleData, '_rowIndex, column, visibleData')
           let col_span = that.table.columns[0].children.length || 0 
            if(row.isDictType == true){
                return { rowspan: 1, colspan: col_span }
            }   
       },
       // 计算合并列
       computMecall(dataSource, headList){
            this.table.mergeCells = [] 
            const headL = headList.length || 0
            const tabal_data = dataSource
            let MergeCell_row = 0
            let itemMergeCell = { row: MergeCell_row, rowspan: 1, colspan: headL, col: 0 }
            tabal_data.forEach((bitem, u)=>{
                if(bitem.isDictType){
                    itemMergeCell = { row: u, rowspan: 1, colspan: headL, col: 0 }
                    this.table.mergeCells.push(itemMergeCell)
                }
            })  
       }, 
       // 查字典
       DictSearch(row, column) {
            let res = ''  
            if(column.field in row){
                res = row[column.field]  
                this.fxList.forEach(item => {
                    if(item.value == res){
                        res = item.text
                    }
                })
            }
            return res
        }, 
   /********** 其他方法此处略过，具体根据项目需求设定处理即可...... *********/

以上内容仅供参考！