效果如圖：

js檔案如下：

$(function () {
    initTable()

    $('#load_vip').change(function () {
        $
            .ajax({
                type: 'POST',
                url: '/nginx/config/diff',
                data: {'load_vip': $(this).val()},
                dataType: 'json',
            })
            .done(res 
 
=> {
                $('#mytable').bootstrapTable('load', res.table_list);
                mergeCells(res.table_list, "diff_result");
            })
            .fail(res => {
            })
    })

   
    function mergeCells(data, fieldName) {
        // 宣告一個map計算相同屬性值在data物件出現的次數和
        var
 
 sortMap = {};
        for (var i = 0; i < data.length; i++) {
            for (var prop in data[i]) {
                if (prop === fieldName) {
                    var key = data[i][prop];
                    if (sortMap.hasOwnProperty(key)) {
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } 
 
else {
                        sortMap[key] = 1;
                    }
                    break;
                }
            }
        }
        var index = 0;
        for (var prop in sortMap) {
            var count = sortMap[prop] * 1;
            $('#mytable').bootstrapTable('mergeCells', {
                index: index,
                field: fieldName,
                colspan: 1,
                rowspan: count
            });
            index += count;
        }
    }

    function initTable() {
        var columnsdata = [[
            {field: 'instance_ip', title: "例項ip", sortable: true, align: 'center'},
            {field: 'load_vip', title: "負載vip", sortable: true, align: 'center'},
            {field: 'role', title: "角色", sortable: true, align: 'center'},
            {field: 'start_time', title: "程序開始時間", sortable: true, align: 'center'},
            {field: 'init_num', title: "程序數量", sortable: true, align: 'center'},
            {
                field: 'verify',
                title: "校驗結果",
                sortable: true,
                align: 'center',
                formatter: function (value, row, index) {
                    if (value === '待修改') {
                        return `<span class="label label-default">待修改</span>`
                    } else if (value === '校驗通過') {
                        return `<span class="label label-success">校驗成功</span>`
                    } else {
                        return `<span class="label label-danger">校驗失敗</span>`
                    }
                }
            },
            {field: 'diff_result', title: "主備配置對比", align: 'center', valign: "middle"}],
            []  // 這裡columnsdata必須為陣列巢狀陣列，且第二個為空陣列才會出現圖上效果

]; //初始化表格,動態從伺服器載入資料 $('#mytable').bootstrapTable({ cache: false, //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*） sortable: false, //是否啟用排序 showColumns: false, //是否顯示列篩選按鈕 showRefresh: false, //是否顯示重新整理按鈕 clickToSelect: false, //是否啟用點選選中行 // uniqueId: "ID", //每一行的唯一標識，一般為主鍵列  columns: columnsdata, pagination: false, }); } });

html

<table id="mytable" style="font-size:10px;" class="table table-bordered table-striped"></table>