vue数据大屏表格无限滚动

最新推荐文章于 2024-05-14 11:22:56 发布

一杯清酒.

最新推荐文章于 2024-05-14 11:22:56 发布

阅读量331

点赞数 1

分类专栏： Vue2 前端项目总结文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45827004/article/details/137110736

版权

Vue2 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

前端项目总结

18 篇文章 0 订阅

订阅专栏

这篇文章介绍了如何使用Vue.js和CSS创建一个动态的表格，展示车辆的车牌号码、公司名称、在线/下线状态以及时间，通过CSS动画控制行的显示和隐藏。

摘要由CSDN通过智能技术生成

          <div class="distance">
            <el-table class="th" border empty-text=" ">
              <el-table-column label="车牌号码" align="center" />
              <el-table-column label="公司名称" align="center" />
              <el-table-column label="状态" align="center" width="60" />
              <el-table-column label="时间" align="center" />
            </el-table>
            <div
              class="box"
              @mouseover="pauseAnimation"
              @mouseout="resumeAnimation"
            >
              <el-table
                :data="tableData"
                :show-header="false"
                style="width: 100%"
                class="table"
                empty-text=" "
                ref="table"
              >
                <el-table-column
                  prop="license"
                  label="车牌号码"
                  align="center"
                />
                <el-table-column
                  prop="orgName"
                  label="公司名称"
                  align="center"
                />
                <el-table-column
                  prop="onoff"
                  label="状态"
                  align="center"
                  width="60"
                >
                  <template #default="scope">
                    <div class="on" v-if="scope.row.onoff">在线</div>
                    <div class="off" v-else>下线</div>
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="时间" align="center" />
              </el-table>
              <el-table
                :data="tableData"
                :show-header="false"
                style="width: 100%"
                class="table"
                empty-text=" "
              >
                <el-table-column
                  prop="license"
                  label="车牌号码"
                  align="center"
                />
                <el-table-column
                  prop="orgName"
                  label="公司名称"
                  align="center"
                />
                <el-table-column
                  prop="onoff"
                  label="状态"
                  align="center"
                  width="60"
                >
                  <template #default="scope">
                    <div v-if="scope.row.onoff" class="on">在线</div>
                    <div class="off" v-else>下线</div>
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="时间" align="center" />
              </el-table>
            </div>
          </div>

    pauseAnimation() {
      const tables = document.querySelectorAll('.table');
      tables.forEach((table) => {
        table.style.animationPlayState = 'paused';
      });
    },
    resumeAnimation() {
      const tables = document.querySelectorAll('.table');
      tables.forEach((table) => {
        table.style.animationPlayState = 'running';
      });
    },

.box {
  /* overflow: hidden; */
  /* border: 1px solid #eaeef2; */
  height: 25vh;
  overflow: hidden;

  @media (max-width: 1560px) {
    height: 23vh;
    /* border: 1px solid #eaeef2; */
  }
}

.table {
  animation: table 15s infinite linear;
}

@keyframes table {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}
:deep .th .el-table__empty-block,
:deep .th .el-table__body-wrapper {
  height: 0px !important;
  min-height: 0px !important;
  display: none;
}
.rightFirst :deep .el-table tr .cell,
.rightSecond :deep .el-table tr .cell {
  padding: 15px !important;
  background-color: #1d2775 !important;
}
:deep .th thead {
  box-sizing: border-box;
  height: 7vh !important;
  background-color: #1d2775;
}
:deep .th thead tr .cell {
  color: #05c4e3;
}
.box :deep .cell {
  color: #f2f2f2;
}