bootstrap-table 请问标题和数据为什么会对不上,谁遇到这样的问题了。

HTML代码:
H~8V_MOP170USBC5N5]]ZBI.png

Js代码:
image.png

显示结果:
image.png

目前知道的第二行跨行就会出现这个问题,请问这个是插问题还是数据问题,求解?

阅读 1.3k
评论
    2 个回答

    @范捷琦Jackie

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表格</title>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.css" rel="stylesheet">
        <style>
            body {
                margin: 0;
                overflow-x: hidden;
                font-size: 14px;
                background-color: #0f111d;
                font-family: "Rubik", sans-serif;
            }
            .table-wrapper {
                padding: 50px;
            }
            .table th, .table td{
                color: #fff;
                padding: .5rem .2rem !important;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="layout-body">
                <!-- 表格数据 -->
                <div class="table-wrapper" id="main-wrapper">
                    <!-- 表格 -->
                    <table class="" id="exampleTableFromData">
                        <thead>
                            <tr>
                                <th data-width="20" data-valign="middle" data-align="center" data-field="state" data-checkbox="true" rowspan="3"></th>
                                <th data-width="100" data-valign="middle" data-align="center" data-field="ip_segment" rowspan="3">IP段</th>
                                <th data-width="100" data-valign="middle" data-align="center" data-field="attack_status" rowspan="3">攻击状态</th>
                                <th data-width="100" data-valign="middle" data-align="center" data-field="business_type" rowspan="3">业务类型</th>
                                <th data-valign="middle" data-align="center" rowspan="2" colspan="2">牵引状态</th>
                                <th data-valign="middle" data-align="center" colspan="10">基础策略</th>
                            </tr>
                            <tr>
                                <th data-valign="middle" data-align="center" colspan="3">人工调优</th>
                                <th data-valign="middle" data-align="center" colspan="2">牵引类型</th>
                                <th data-valign="middle" data-align="center" colspan="2">牵引时长</th>
    
                                <!-- 这里跨两行就有问题 -->
                                <th data-valign="middle" data-align="center" data-field="clean_aids" rowspan="2">清洗辅助</th>
                                <th data-valign="middle" data-align="center" data-field="seal_line" rowspan="2">封停线路</th>
                                <th data-valign="middle" data-align="center" data-field="default_line" rowspan="2">默认线路</th>
                            </tr>
                            <tr>
                                <th data-valign="middle" data-align="center" data-field="status_pl_wall">普通墙</th>
                                <th data-valign="middle" data-align="center" data-field="status_jd_wall">节点墙</th>
    
                                <th data-valign="middle" data-align="center" data-field="seal_time" class="edit-mode">封停时长</th>
                                <th data-valign="middle" data-align="center" data-field="seal_max" class="edit-mode">封停MAX</th>
                                <th data-valign="middle" data-align="center" data-field="defense_time" class="edit-mode">防御时长</th>
    
                                <th data-valign="middle" data-align="center" data-field="lx_pt_wall" class="edit-mode">普通墙</th>
                                <th data-valign="middle" data-align="center" data-field="lx_jd_wall" class="edit-mode">节点墙</th>
                                <th data-valign="middle" data-align="center" data-field="sc_pt_wall">普通墙</th>
                                <th data-valign="middle" data-align="center" data-field="sc_jd_wall">节点墙</th>
                            </tr>
                        </thead>
                        
                    </table>
                </div>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.js"></script>
        <script>
            $('table').bootstrapTable('resetView');
            let data = [{
                'ip_segment': '192.168.11.0/24',
                'attack_status': 'DDOS攻击',
                'business_type': '普通高防段',
                'status_pl_wall': '牵引',
                'status_jd_wall': '锁定',
                'seal_time' : 25,
                'seal_max' : 10,
                'defense_time' : 1800,
                'lx_pt_wall': '锁定',
                'lx_jd_wall': '锁定',
                'sc_pt_wall' : 1800,
                'sc_jd_wall' : 300,
                
                'clean_aids' : '是',
                'seal_line': 'CT,NTT,VOX',
                'default_line': 'CT,NTT,VOX',
            }]
            $('#exampleTableFromData').bootstrapTable({
                
                data: data,
                height: "600"
            });
        </script>
    </body>
    </html>
      相似问题
      推荐文章