【el-table固定表格头循环滚动】vue结合vue-seamless-scroll操作表格自动滚动效果

最新推荐文章于 2025-03-13 14:59:12 发布

娇娇思密达

最新推荐文章于 2025-03-13 14:59:12 发布

阅读量5.8k

点赞数 2

文章标签： javascript vue elementui

本文链接：https://blog.csdn.net/weixin_50790427/article/details/121698352

版权

效果图

配合vue-seamless-scroll插件

安装vue-seamless-scroll插件

npm install vue-seamless-scroll --save

然后在main.js文件里面引入使用：

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

代码

<template>
  <div class="min">
    <div style="display: inline-block; width: 100%">
      <el-table
        :data="list"
        style="width: 100%"
        class="top"
      >
        <el-table-column prop="fileName" label="油库名称" align="center" />
        <el-table-column prop="uploadDate" label="油库编号" align="center" />
        <el-table-column prop="fileSize" label="总库存(m3)" align="center" />
        <el-table-column prop="uploadMan" label="安全高度(mm)" align="center" />
        <el-table-column prop="visitNum" label="安全容量(m3)" align="center" />
        <el-table-column prop="visitNum" label="装油高度(mm)" align="center" />
        <el-table-column prop="visitNum" label="油罐差压(Pa)" align="center" />
        <el-table-column prop="visitNum" label="查表体积(m3)" align="center" />
      </el-table>
      <vue-seamless-scroll
        :data="list"
        class="seamless-warp"
        style="width: 100%"
        :class-option="classOption"
      >
        <el-table
          :data="list"
          style="width: 100%"
          class="bottom"
        >
          <el-table-column prop="fileName" label="油库名称" align="center" />
          <el-table-column prop="uploadDate" label="油库编号" align="center" />
          <el-table-column prop="fileSize" label="总库存(m3)" align="center" />
          <el-table-column prop="uploadMan" label="安全高度(mm)" align="center" />
          <el-table-column prop="visitNum" label="安全容量(m3)" align="center" />
          <el-table-column prop="visitNum" label="装油高度(mm)" align="center" />
          <el-table-column prop="visitNum" label="油罐差压(Pa)" align="center" />
          <el-table-column prop="visitNum" label="查表体积(m3)" align="center" />
        </el-table>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟数据
      list: [
        {
          fileName: "每天开心笑一笑",
          uploadDate: "2021-11-18",
          fileSize: "8",
          uploadMan: "165",
          visitNum: "112",
        },
        {
          fileName: "每天开心笑一笑",
          uploadDate: "2021-11-18",
          fileSize: "8",
          uploadMan: "165",
          visitNum: "112",
        },
        {
          fileName: "每天开心笑一笑",
          uploadDate: "2021-11-18",
          fileSize: "8",
          uploadMan: "165",
          visitNum: "112",
        },
        {
          fileName: "每天开心笑一笑",
          uploadDate: "2021-11-18",
          fileSize: "8",
          uploadMan: "165",
          visitNum: "112",
        },
        {
          fileName: "每天开心笑一笑",
          uploadDate: "2021-11-18",
          fileSize: "8",
          uploadMan: "165",
          visitNum: "112",
        },
        {
          fileName: "每天开心笑一笑",
          uploadDate: "2021-11-18",
          fileSize: "8",
          uploadMan: "165",
          visitNum: "112",
        }
      ],
    };
  },
  computed: {
    // 滚动条的配置项
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>
<style lang="scss" scoped>
>>> .seamless-warp {
  height: 229px;
  overflow: hidden;
}
>>> .min {
  display: flex;
  width: 100%;
}
>>> .top .el-table__body-wrapper {
  display: none;
}
>>> .bottom .el-table__header-wrapper {
  display: none;
  width: 100%;
}
</style>