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

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

Js代码:
image.png

显示结果:
image.png

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

阅读 1.3k
评论
    2 个回答

    Hello,弄下来感觉问题出在了牵引状态这个占了两行两列然后引起了问题,把它改成一行一列就可以了。

    <!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-valign="middle" data-align="center" data-field="state" data-checkbox="true" rowspan="3"></th>
                  <th data-valign="middle" data-align="center" data-field="ip_segment" rowspan="3">IP段</th>
                  <th data-valign="middle" data-align="center" data-field="attack_status" rowspan="3">攻击状态</th>
                  <th data-valign="middle" data-align="center" data-field="business_type" rowspan="3">业务类型</th>
                  <th data-valign="middle" data-align="center" rowspan="1" colspan="2">牵引状态</th>
                  <th data-valign="middle" data-align="center" colspan="10">基础策略</th>
                </tr>
                <tr>
                  <th data-valign="middle" data-align="center" rowspan="2" data-field="status_pl_wall">普通墙</th>
                  <th data-valign="middle" data-align="center" rowspan="2" data-field="status_jd_wall">节点墙</th>
                  <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="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" class="edit-mode">普通墙</th>
                  <th data-valign="middle" data-align="center" data-field="sc_jd_wall" class="edit-mode">节点墙</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>
    

    希望能帮助到你。

      相似问题
      推荐文章