Fixed colspan group header display bug

src/bootstrap-table.js

@@ -219,6 +219,8 @@ class BootstrapTable {
       searchables: []
     }
 
+    Utils.updateFieldGroup(this.options.columns)
+
     this.options.columns.forEach((columns, i) => {
       html.push('<tr>')
 
@@ -230,6 +232,10 @@ class BootstrapTable {
       }
 
       columns.forEach((column, j) => {
+        if (!column.visible) {
+          return
+        }
+
         const class_ = Utils.sprintf(' class="%s"', column['class'])
         const unitWidth = column.widthUnit
         const width = Number.parseFloat(column.width)
@@ -253,10 +259,6 @@ class BootstrapTable {
           this.header.cellStyles[column.fieldIndex] = column.cellStyle
           this.header.searchables[column.fieldIndex] = column.searchable
 
-          if (!column.visible) {
-            return
-          }
-
           if (this.options.cardView && (!column.cardVisible)) {
             return
           }
@@ -1906,7 +1908,7 @@ class BootstrapTable {
     for (const field of this.header.fields) {
       const column = this.columns[this.fieldsColumnsIndex[field]]
 
-      if (!column.visible) {
+      if (!column || !column.visible) {
         continue
       }
       visibleFields.push(field)

src/utils/index.js

@@ -54,12 +54,16 @@ export default {
         const colspan = r.colspan || 1
         const index = flag[i].indexOf(false)
 
+        r.colspanIndex = index
+
         if (colspan === 1) {
           r.fieldIndex = index
           // when field is undefined, use index instead
           if (typeof r.field === 'undefined') {
             r.field = index
           }
+        } else {
+          r.colspanGroup = r.colspan
         }
 
         for (let k = 0; k < rowspan; k++) {
@@ -72,6 +76,26 @@ export default {
     }
   },
 
+  updateFieldGroup (columns) {
+    const allColumns = columns.flat()
+
+    for (const c of columns) {
+      for (const r of c) {
+        if (r.colspanGroup > 1) {
+          let colspan = 0
+          for (let i = r.colspanIndex; i < r.colspanIndex + r.colspanGroup; i++) {
+            const column = allColumns.find(col => col.fieldIndex === i)
+            if (column.visible) {
+              colspan++
+            }
+          }
+          r.colspan = colspan
+          r.visible = colspan > 0
+        }
+      }
+    }
+  },
+
   getScrollBarWidth () {
     if (this.cachedWidth === undefined) {
       const $inner = $('<div/>').addClass('fixed-table-scroll-inner')