vue 滚动表格，鼠标进入暂停

最新推荐文章于 2025-04-24 15:04:34 发布

金戈_旭日东升

最新推荐文章于 2025-04-24 15:04:34 发布

阅读量1k

点赞数

分类专栏： VUE 前端

本文链接：https://blog.youkuaiyun.com/fang156239305/article/details/112802732

版权

VUE 前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何在Vue项目中创建一个滚动表格，并实现当鼠标悬停在表格上时暂停滚动的效果。同时，根据设备状态展示不同颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 表格数据循环滚动

2 鼠标移到表格数据停止滚动

3 设备状态显示不同的颜色

   <el-col :span="24" class="chart" style="height: 85%;">
                  <div class="table" style="height: 98%;overflow-y:hidden;font-size:10px;" 
                   @mouseenter="mouseEnter('Dev')"
                   @mouseleave="mouseLeave('Dev')">
                    <table>
                        <thead>
                          <tr>
                          <th style="display:none">devId</th> 
                          <th>设备类型</th>
                          <th>所在地址</th>
                          <th>设备状态</th>
                          <th>最后更新数据时间</th>
                          <th>更多</th>
                        </tr>
                        </thead>
                      <tbody>
                      <tr style="height:40px" v-for="item in devInfo_tabledata"
                         >
                        <td style="display:none">{{item.devId}}</td>  
                        <td>{{item.devType}}</td>
                        <td>{{item.address}}</td>
                        <td style="color:#00FF00" v-if="item.devStatus === ''"></td>
                        <td style="color:#00FF00" v-if="item.devStatus === '正常'">{{item.devStatus}}</td>
                        <td style="color:#eeea21" v-if="item.devStatus === '睡眠'">{{item.devStatus}}</td>
                        <td style="color:red" v-if="item.devStatus === '故障'">{{item.devStatus}}</td> 
                        <td>{{item.updateTime}}</td>
                        <td style="white-space:nowrap;text-overflow:ellipsis;">设备详情</td>
                        <!-- <td> <button style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background-color:#99CCFF">查看详情</button></td> -->
                      </tr>
                      </tbody>
                      </table>
                </div>
              </el-col>

mounted(){
this. scrollDevInfoTabledata()
},
method(){
     
 //设备列表轮播
      scrollDevInfoTabledata() {
        // this.devInfo_tabledata.push(this.deviceData[0]);
        this.devInfo_tabledata.shift();
        if (this.devInfo_tabledata.length < 6) {
        }
        this.devTimer = setTimeout(this.scrollDevInfoTabledata, 3000)
      },
    //鼠标进入表格暂停
      mouseEnter(label){
        if(label === 'Dev'){
          clearTimeout(this.devTimer);
          this.devTimer = null;}
}
      //鼠标离开表格开始轮播
mouseLeave(label){
        if(label === 'Dev'){
          this.devTimer = setTimeout(this.scrollDevInfoTabledata,3000);}
}
}