el-table 实现无缝滚动

已于 2023-06-12 16:04:41 修改
阅读量4.9k 收藏 11
点赞数 1
分类专栏： elment-ui使用记录 文章标签： vue.js
于 2021-10-15 16:04:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37550440/article/details/120785356
版权

 1.原生得方式

<template>
  <el-table
      :data="tableData"
      style="width: 100%;height:100%">
      <el-table-column
      stripe
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

  <!-- <div>
    <ul id="con1" ref="con1" :class="{ anim: animate == true }">
      <li v-for="(item,index) in items" :key="index">{{ item.name }}</li>
    </ul>
  </div> -->
</template>

<script>
export default {
data() {
  return {
      animate:false,
      // items:[
      //     {name:"马云"},
      //     {name:"雷军"},
      //     {name:"王勤"}
      // ]
      tableData: [{
            date: '2016-05-01',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1 弄'
          }, {
            date: '2016-05-02',
            name: '王小虎2',
            address: '上海市普陀区金沙江路 2 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎3',
            address: '上海市普陀区金沙江路 3 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎4',
            address: '上海市普陀区金沙江路 4 弄'
          }]
  }
},
created(){
    setInterval(this.scroll,2000)
},
methods: {
    // scroll(){
    //    this.animate=true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
    //    setTimeout(()=>{      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
    //           console.log(this.items[0])
    //           this.items.push(this.items[0]);  // 将数组的第一个元素添加到数组的
    //           this.items.shift();    //删除数组的第一个元素
    //           console.log(this.items)           
    //           this.animate=false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
    //    },500)
    // }
    scroll(){
      let el = document.querySelector('.el-table__body-wrapper')
      el.addClassName = 'anim'
       setTimeout(()=>{ 
              // console.log(this.items[0])
              this.tableData.push(this.tableData[0]);  // 将数组的第一个元素添加到数组的
              this.tableData.shift();    //删除数组的第一个元素
       },2000)
    }
  }
}
</script>

<style scoped>
/* *{
    margin: 0 ;
    padding: 0;
}
#box{
    width: 300px;
    height: 32px;
    overflow: hidden;
    padding-left: 30px;
    border: 1px solid black;
}
.anim{
    transition: all 0.5s;
    margin-top: -30px;
}
#con1 li{
    list-style: none;
    line-height: 30px;
    height: 30px;
    color: red;
} */
.anim{
  animation: mymove 1s linear;
}

@keyframes mymove
{
from {
  transform: translateY(0px) ;
}
to {
  transform: translateY(-20px) ;
}
}
</style>

2.vueSeamlessScroll插件的方式

<div class="user_skills comm-item" style="width: 100%">
// 第一个el-table是固定表头 ，第二个table取消表头
                
                <el-table
                  border
                  max-height="80"
                  :header-row-style="{
                    background:
                      'url(../../assets/images/web/table_header_bg.png)  no-repeat'
                  }"
                  :header-cell-style="{
                    height: '70px',
                    padding: '0',
                    'box-sizing': 'border-box',
                    'text-align': 'center',
                    border: 'none',
                    'font-size': '26px',
                    color: '#a8b1af',
                    'font-family': 'Adobe Heiti Std',
                    'font-weight': 'normal',
                    'background-color': '#022731'
                  }"
                  :row-style="{
                    'background-color': 'transparent',
                    background: 'url(/static/images/table_bg.png) no-repeat',
                    'font-size': '30px',
                    cursor: 'pointer',
                    'background-position': 'bottom',
                    'background-size': '100%'
                  }"
                  :cell-style="{
                    height: '90px',
                    'text-align': 'center',
                    'line-height': '60px',
                    padding: '0',
                    border: 'none',
                    'font-family': 'MicrosoftYaHei',
                    'font-weight': 400,
                    color: '#dddfe1',
                    'line-height': '90px',
                    'font-size': '30px'
                  }"
                >
                  <el-table-column label="序号" align="center" width="80px">
                  </el-table-column>
                  <el-table-column label="断面名称" width="240px">
                  </el-table-column>
                  <el-table-column label="监测时间" width="240px">
                  </el-table-column>
                  <el-table-column label="水质"> </el-table-column>
                  <el-table-column label="PH值"> </el-table-column>
                  <el-table-column label="溶解氧"> </el-table-column>
                  <el-table-column label="电导率"> </el-table-column>

                  <el-table-column label="水温"> </el-table-column>
                  <el-table-column label="浊度"> </el-table-column>
                  <el-table-column label="总磷" v-if="isShowAll">
                  </el-table-column>

                  <el-table-column label="氨氮" v-if="isShowAll">
                  </el-table-column>
                  <el-table-column label="总氮" v-if="isShowAll">
                  </el-table-column>
                  <el-table-column label="高锰酸盐" v-if="isShowAll">
                  </el-table-column>
                </el-table>
                <div style="overflow:hidden">
                  <vue-seamless-scroll
                    :data="waterList"
                    :class-option="defaultOption1"
                  >
                    <!-- max-height="560" -->
                    <el-table
                      ref="waterTable"
                      :show-header="false"
                      @cell-mouse-enter="mouseEnter"
                      @cell-mouse-leave="mouseLeave"
                      :data="waterList"
                      border
                      max-height="100%"
                      :header-row-style="{
                        background:
                          'url(../../assets/images/web/table_header_bg.png)  no-repeat'
                      }"
                      :header-cell-style="{
                        height: '70px',
                        padding: '0',
                        'box-sizing': 'border-box',
                        'text-align': 'center',
                        border: 'none',
                        'font-size': '26px',
                        color: '#a8b1af',
                        'font-family': 'Adobe Heiti Std',
                        'font-weight': 'normal',
                        'background-color': '#022731'
                      }"
                      :row-style="{
                        'background-color': 'transparent',
                        background:
                          'url(/static/images/table_bg.png) no-repeat',
                        'font-size': '30px',
                        /* color: ' #fffefe',
                    color: 'red',
                     */
                        cursor: 'pointer',
                        'background-position': 'bottom',
                        'background-size': '100%'
                      }"
                      :cell-style="{
                        height: '90px',
                        'text-align': 'center',
                        'line-height': '60px',
                        padding: '0',
                        border: 'none',
                        'font-family': 'MicrosoftYaHei',
                        'font-weight': 400,
                        color: '#dddfe1',
                        'line-height': '90px',
                        'font-size': '30px'
                      }"
                    >
                      <el-table-column label="序号" align="center" width="80px">
                        <template slot-scope="scope">
                          <div
                            :class="[
                              scope.$index + 1 < 4 ? errorCls : errorCls,
                              'index'
                            ]"
                          >
                            {{ scope.$index + 1 }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="crossSectionName"
                        label="断面名称"
                        width="240px"
                      >
                        <template slot-scope="{ row }">
                          <span @click="getCenter(row)">
                            {{ row.crossSectionName }}
                          </span>
                          <!--                      <span style="color: yellow;"></span>{{ currentDate }}-->
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="monitorTime"
                        label="监测时间"
                        width="240px"
                      >
                        <template slot-scope="{ row }">
                          <span>
                            {{
                              currentCircle === "NOW"
                                ? parseTime(tableDate, "{y}-{m}-{d} {h}")
                                : tableDate
                            }}
                          </span>
                          <!--                      <span style="color: yellow;"></span>{{ currentDate }}-->
                        </template>
                      </el-table-column>

                      <el-table-column prop="quality" label="水质">
                        <template slot-scope="slot">
                          <span
                            class="waterLevelClass"
                            :style="
                              'background:' + getWaterColor(slot.row.quality)
                            "
                            >{{ getWaterLevel(slot.row.quality) }}</span
                          >
                        </template>
                      </el-table-column>
                      <el-table-column prop="ph" label="PH值">
                        <template slot-scope="scope">
                          <div
                            v-for="(item, index) in scope.row
                              .factorValueRecords"
                            :key="index"
                          >
                            <span
                              v-if="item.factorCode == 'PH_DIMENSIONLESS'"
                              >{{ getDataToFixed(item.value, 1) || "-" }}</span
                            >
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="溶解氧">
                        <template slot-scope="scope">
                          <div
                            v-for="(item, index) in scope.row
                              .factorValueRecords"
                            :key="index"
                          >
                            <span v-if="item.factorCode == 'DO'">{{
                              getDataToFixed(item.value, 2) || "-"
                            }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="conductivity" label="电导率">
                        <template slot-scope="scope">
                          <div
                            v-for="(item, index) in scope.row
                              .factorValueRecords"
                            :key="index"
                          >
                            <span v-if="item.factorCode == 'CONDUCTIVITY'">{{
                              getDataToFixed(item.value, 1) || "-"
                            }}</span>
                          </div>
                        </template>
                      </el-table-column>

                      <el-table-column prop="ph" label="水温">
                        <template slot-scope="scope">
                          <div
                            v-for="(item, index) in scope.row
                              .factorValueRecords"
                            :key="index"
                          >
                            <span v-if="item.factorCode == 'TEMPERATURE'">{{
                              getDataToFixed(item.value, 1) || "-"
                            }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="ph" label="浊度">
                        <template slot-scope="scope">
                          <div
                            v-for="(item, index) in scope.row
                              .factorValueRecords"
                            :key="index"
                          >
                            <span v-if="item.factorCode == 'TURBIDITY'">{{
                              getDataToFixed(item.value, 1) || "-"
                            }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="ph" label="总磷" v-if="isShowAll">
                        <template slot-scope="scope">
                          <div
                            v-for="(item, index) in scope.row
                              .factorValueRecords"
                            :key="index"
                          >
                            <span v-if="item.factorCode == 'TP'">{{
                              getDataToFixed(item.value, 3) || "-"
                            }}</span>
                          </div>
                        </template>
                      </el-table-column>

                      <el-table-column prop="ph" label="氨氮" v-if="isShowAll">
                        <template slot-scope="scope">
                          <div
                            v-for="(item, index) in scope.row
                              .factorValueRecords"
                            :key="index"
                          >
                            <span v-if="item.factorCode == 'NH3'">{{
                              getDataToFixed(item.value, 2) || "-"
                            }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="ph" label="总氮" v-if="isShowAll">
                        <template slot-scope="scope">
                          <div
                            v-for="(item, index) in scope.row
                              .factorValueRecords"
                            :key="index"
                          >
                            <span v-if="item.factorCode == 'TN'">{{
                              getDataToFixed(item.value, 2) || "-"
                            }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="ph"
                        label="高锰酸盐"
                        v-if="isShowAll"
                      >
                        <template slot-scope="scope">
                          <div
                            v-for="(item, index) in scope.row
                              .factorValueRecords"
                            :key="index"
                          >
                            <span
                              v-if="item.factorCode == 'PERMANGANATE_INDEX'"
                              >{{ getDataToFixed(item.value, 1) || "-" }}</span
                            >
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </vue-seamless-scroll>
                </div>
              </div>



defaultOption1() {
      // if(this.autoPlay1) return this.autoPlay1
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: this.waterList.length, // 开始无缝滚动的数据量 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)
        // autoPlay: false
      };
    }

流氓也是种气质 _Cookie
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
table表单无缝连接滚动
11-11
JavaScript是实现无缝滚动的核心，它负责检测用户滚动事件，判断是否接近表格底部，如果满足条件，则通过Ajax请求加载新的数据。Ajax允许在后台与服务器通信，无需刷新整个页面，提高交互性。 ### 5. 数据分块与懒...
大量数据el-tabel的虚拟滚动
qq_40658616的博客
02-29 859
虚拟滚动是一种优化技术，可以在大量数据的情况下，只渲染可视区域的内容，而不是整个数据集。在这个示例中，我们通过动态计算每一行的高度，然后根据可视区域的高度来确定可视区域的数据范围。这样即使行高不固定，也能实现虚拟滚动的效果。组件本身不支持虚拟滚动，但你可以通过一些额外的工作来实现虚拟滚动的效果。的高度，并在其内部使用滚动容器，监听滚动事件，动态地渲染可视区域的数据。元素的子元素表示的。在实际应用中，你可能需要根据实际情况对代码进行调整。这里提供一个简单的示例代码，演示如何通过监听滚动事件来实现虚拟滚动。
vue el-table自动无限滚动
周家大小姐
05-23 2429
原先方案是用el-table-column插件来实现但发现在el-table-column的原理是copy原数据做为第二份数据中show-overflow-tooltip会失效,所以换了个JS写法。
el-table表格通过vue-seamless-scroll实现表格滚动(html + Vue + Element-UI)
最新发布
weixin_42597632的博客
06-28 861
el-table表格滚动可以通过定义两个table实现，第一个table展示标题，第二个table展示滚动内容。把内容放在vue-seamless-scroll组件中即可。
elementui el-table表格自动循环滚动【超详细图解】
EFFY
03-12 4971
【代码】elementui el-table表格自动循环滚动【超详细图解】
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
el-table加入无限滚动，并且可以控制列是否显示以及列的排序，不是网上大部分的json配置形式
写一个pc端的文字无缝滚动
qq_40711550的博客
11-26 356
``1 <div id="box"> <ul id="con1" ref="con1" :class="{anim:animate==true}"> <li v-for='item in items' :key="item">{{item.name}}</li> </ul> </div> export default { data() { return { animate
el-table如何实现自动滚动效果
qq_43474235的博客
11-06 6418
el-table如何实现自动滚动效果
el-table表格自动滚动
木木木华的博客
07-26 7704
el-table表格自动滚动
el-table表格实现自动滚动效果
Callme_FanXu的博客
11-01 5882
table页面的内容如果超出设定的height会出现自动无限滚动的效果，如下所示： 先给el-table一个ref属性 然后获取到这个属性 在mounted阶段执行scrollFun函数，通过setTnterval定时器来实现动态滚动效果，代码如下： 如果出现列表字段过长时，可使用tooltip-effect=“dark” 搭配 show-overflow-tooltip 来实现省略提示效果
table无限循环无缝滚动.zip
09-01
"table无限循环无缝滚动"是一个功能，它能够让用户在浏览长表格时体验到类似轮播的效果，即当表格底部到达时，表格内容会自动重新排列，让顶部的内容再次出现，形成一种无限滚动的视觉效果。这一技术主要依赖...
vue的无缝滚动组件vue-seamless-scroll实例
08-28
Vue-Seamless-Scroll 是一个基于 Vue.js 的无缝滚动组件，提供了简洁易用的 API，帮助开发者快速实现无缝滚动效果。本文将详细介绍 Vue-Seamless-Scroll 的用法和配置。 安装 使用 NPM 安装 Vue-Seamless-Scroll：...
简单的 vue基于elementui的无限滚动组件.txt
04-20
简单的 vue基于elementui的无限滚动组件，参数少。代码检简。请全局引入elementui。
实现el-table表格滚动
localhost
03-21 1431
【代码】实现el-table表格滚动。
el-table无限滚动问题解决方法
smallteddy.blog.csdn.net
03-03 2257
做项目的时候，二次封装了el-table 组件，但是当想让 table 高度随着内容增大而增大时，空数据的时候导致了页面无限增加高度的问题。
el-table 横向滚动条固定在可视窗口底部
热门推荐
ZMJ_QQ的博客
04-21 3万+
有一个需求,当el-table的宽度超出浏览器宽度时，虽然el_table底部会出现滚动条，但是每次需要先滚动到底部，才能使用el-table的滚动体，很是麻烦。因此当el_table的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条，在网上找了四篇不同方法，全都试了一遍，四个方法的原文地址以及效果图我都贴出来了，看个人选择了，我自己用的第二个，一个大佬写的。...
实现el-table表单自动滚动
weixin_57889610的博客
12-12 1927
然后设置计时器，并且设置鼠标移入移出事件 并且设置定时器进行数据滚动。首先 设置ref="tableRef" 获取当前的dom元素。效果是表格数据自动滚动，鼠标移入暂停滚动 移出滚动继续。
记录实现el-table列表的无限滚动（InfiniteScroll）--使用原生Scroll
gfw1506084303的博客
06-11 1874
记录实现el-table列表的无限滚动（InfiniteScroll）--使用原生Scroll实现效果
在pycharm中查看UML图
05-23
在 PyCharm 中查看 UML 图，需要安装一个插件叫做 PlantUML Integration。安装方法如下： 1. 打开 PyCharm，进入 Settings（Windows 或 Linux 下为 File -> Settings，Mac 下为 PyCharm -> Preferences）； 2. 在左侧菜单中选择 Plugins； 3. 在右侧搜索框中输入 PlantUML； 4. 找到 PlantUML Integration 插件，点击 Install 安装； 5. 安装完成后，重启 PyCharm。 在 PyCharm 中查看 UML 图的步骤如下： 1. 在项目中创建一个 .puml 文件，编写 UML 图代码； 2. 右键点击 .puml 文件，选择 Diagrams -> Show Diagram 或者 Diagrams -> Preview Diagram； 3. PyCharm 会自动根据代码生成对应的 UML 图，并显示在窗口中。 注意，如果在 .puml 文件中编写 UML 图代码时，需要使用 PlantUML 的语法。如果不熟悉 PlantUML 语法，可以在官网上查看相关文档和示例。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值