原生table适配大屏-带滚动分页

勇气大爆炸

已于 2024-04-12 10:42:09 修改

阅读量100

点赞数 1

文章标签： java 前端服务器

于 2024-04-03 11:51:18 首次发布

本文链接：https://blog.csdn.net/qq_38260470/article/details/137339355

版权

存在有缝隙的问题

<table class="yczcTable" id="yczcTable" rules="cols">
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>名称</th>
                      <th>告警数量</th>
                      <th>类型</th>
                      <th>价格部门</th>
                      <th>积压告警数</th>
                    </tr>
                  </thead>
                  <tbody>
                    <div @scroll="handleScroll($event)">
                    <tr v-for="(item, index) in tableData" :key="index">
                      <td>{{ item.number }}</td>
                      <td>{{ item.name }}</td>
                      <td>
                        <div class="gz">
                          <div class="gjNumH">{{ item.num }}</div>
                          <div class="gjNumHo">{{ item.num }}</div>
                          <div class="gjNumL">{{ item.num }}</div>
                        </div>
                      </td>
                      <td>{{ item.type }}</td>
                      <td>{{ item.price }}</td>
                      <td>{{ item.gjnum }}</td>
                    </tr>
                  </div>
                  </tbody>
                </table>
 methods: {
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollTop + clientHeight >= scrollHeight) {
        // 滚动条到达底部，触发懒加载
        console.log("12333");
        // this.loadMore();
      }
      
    },}
<style>
.yczcTable {
  width: 100%;
  text-align: center;
  td,
  th {
    padding: 0;
  }
  th {
    border: 1px solid #05457d;
  }
  thead tr {
    width: 100%;
    height: 38px;
    line-height: 38px;
    background-color: #05457d;
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  tbody>div {
    width: 100%;
    height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    tr {
      width: 100%;
      display: table;
      table-layout: fixed;
    }
  }
  tbody div tr:nth-child(even) {
    width: 100%;
    height: 38px;
    line-height: 38px;
    background-color: #05457d;
    td {
      border: 1px solid #05457d;
    }
  }
  tbody div tr:nth-child(odd) {
    width: 100%;
    height: 38px;
    line-height: 38px;
    background-color: #012851;
    td {
      border: 1px solid #012851;
    }
  }
  .gz {
    display: flex;
    justify-content: space-evenly;
    height: 22px;
    line-height: 22px;
    .gjNumH {
      width: 36px;
      height: 22px;
      background-color: #fe7373;
      border-radius: 2px;
    }
    .gjNumHo {
      width: 36px;
      height: 22px;
      background-color: #ffb951;
      border-radius: 2px;
    }
    .gjNumL {
      width: 36px;
      height: 22px;
      background-color: #0dd3a9;
      border-radius: 2px;
    }
  }
}
</style>


.yczcTable {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  td,
  th {
    padding: 0;
    border: 0;
  }
  thead tr {
    width: 587px;
    height: 38px;
    background-color: #05457d;
  }
  tbody tr:nth-child(even) {
    width: 587px;
    height: 38px;
    background-color: #05457d;
  }
  tbody tr:nth-child(odd) {
    width: 587px;
    height: 38px;
    background-color: #012851;
  }
}