投稿
问答

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

作者：admin 2021-09-16 我要评论

HTML代码： Js代码： 显示结果： 目前知道的第二行跨行就会出现这个问题，请问这个是插问题还是数据问题，求解？ ### Hello，弄下来感觉问题出在了 牵引状态 这...

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

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

Js代码：
image.png

显示结果：
image.png

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

###

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="/uploads/allimg/210916/12001531M-3.jpg"></script>
  <script src="/uploads/allimg/210916/1200154336-4.jpg"></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>

希望能帮助到你。

###

@范捷琦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="/uploads/allimg/210916/12001531M-3.jpg"></script>
    <script src="/uploads/allimg/210916/1200154336-4.jpg"></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>

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章
  • bootstrap-table 请问标题和数据为什么

    bootstrap-table 请问标题和数据为什么

  • rabbitmq-server -detached后台运行rab

    rabbitmq-server -detached后台运行rab

  • Docker里两个php容器一个正常访问，一

    Docker里两个php容器一个正常访问，一

  • 为什么element ui里面的el-input标签无

    为什么element ui里面的el-input标签无

腾讯云代理商
精彩导读
/images/defaultpic.gif

如何限制多开窗口看视频？

/images/defaultpic.gif

CSS flex布局子元素的高度不相同且自适

/images/defaultpic.gif

onscroll 事件的 TypeScript 函数参数

/uploads/allimg/210817/1534351S7-0-lp.jpg

nodejs 中的 {} 和浏览器控制台中的 {}

/images/defaultpic.gif

存入数据库时富文本的图片存地址还是ba

/images/defaultpic.gif

七牛云多文件

海外云服务器
热门资讯
备案：湘ICP备15009499号-1
网站简介 投稿须知 商务合作 版权申明 技术支持：TOP云