vue2+element的table滚动显示

最新推荐文章于 2025-11-27 08:52:14 发布

原创最新推荐文章于 2025-11-27 08:52:14 发布 · 969 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

技巧专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue项目中实现表格内容滚动而标题不滚动的效果。通过引入vue-seamless-scroll组件，并配置相应的计算属性，实现表格的无缝滚动功能，同时保持表头固定显示。

【1】需要安装滚动插件

【2】给标题单独设置一个table，将要滚动的区域放在<vue-seamless-scroll>里面，这样可以防止标题跟着一起滚动

 <table class="kpitable">
          <thead class="thead">
            <th>项目</th>
            <th>项目</th>
            <th>电话</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>电话</th>
            <th>电话</th>
          </thead>
        </table>

        <vue-seamless-scroll
          :data="tabledata2"
          :class-option="optionHover"
          class="seamless-warp"
        >
          <el-table
            id="kpitable"
            :data="tabledata2"
            border
            show-summary
            :sum-text="'汇总'"
            size="mini"
            style="width: 100%; height: 100%"
            :header-cell-style="{ background: '#ff7f50', color: '#fff' }"
            class="
              custom-table-2
              hidden-thead
              el-table__body-wrapper::-webkit-scrollbar
            "
            ref="kpitable"
          >
            <el-table-column prop="project" label=""> </el-table-column>
            <el-table-column prop="total" label=""> </el-table-column>
            <el-table-column prop="first" label=""> </el-table-column>
            <el-table-column prop="second" label=""> </el-table-column>
            <el-table-column prop="firstday" label=""> </el-table-column>
            <el-table-column prop="secondday" label=""> </el-table-column>
            <el-table-column prop="thirdday" label=""> </el-table-column>
          </el-table>
        </vue-seamless-scroll>

【3】在computed里面设置滚动的属性

computed: {
    optionHover() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        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)
      };
    },
  },