大屏中el-table无限轮播效果实现

思路

使用scrollTop动画效果实现自动轮播动效效果

上代码

<div class="scroll_table">
    <!-- 列表表头 -->
    <div class="table_hader">
         <div class="tag1">序号</div>
         <div class="tag2">机台名称</div>
         <div class="tag3"> 故障等级</div>
         <div class="tag4">检测时间</div>
    </div>
    <!-- 列表循环部分 -->
    <div class="table_body" ref="table_bodys">
       <div v-for="(item,index) in dataList" :key="index" @click="getItem(item,isShow)" style="cursor: pointer;">
         <div :class="getClass(item,index)">
            <div class="body1">{{ index+1 }}</div>
               <div class="body_cont_box">
                <div class="body2">{{ item.name }}</div>
                <div class="body3">一</div>
                <div class="body4">{{ item.time }}</div>
               </div>
            </div>
         <div class="expand" v-if="item.show">
         <div>故障描述：文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
            <div>故障类型：类型一 </div>
         </div>
        </div>
     </div>
</div>

js部分

<script>
export default {
    components: {
        
    },
    // 定义属性
    data() {
        return {
            isScroll: true,
             dataList: [
                { name: '机台一', guzang: '6%', time: '2023.12.08',show:false},
                { name: '机台2', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台3', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台4', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台5', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台6', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台7', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台8', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台9', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台10', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台11', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台12', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台13', guzang: '6%', time: '2023.12.08',show:false },
                { name: '机台14', guzang: '6%', time: '2023.12.08',show:false },
            ],
        }
    },
    watch: {},
    methods: {
        getClass(row,index){
            if(row.show){
                return 'data_body'    
            }else{
                return (index%2)==0?'data_body1':'data_body2'
            }
        },
        // 列表点击事件  
        getItem(row,isShow){
            if(this.dataList.length>0){
                this.dataList.forEach(item =>{
                    if(item === row && isShow){
                        item.show = true
                        console.log('item.show:'+item.show);
                    }else{
                        item.show = false
                    }
                })
                this.isShow = !this.isShow
            }
        },
        scroll() {
            let isScroll = true //滚动
            const tableDom = this.$refs['table_bodys']
            //鼠标放上去，停止滚动；移开，继续滚动
            tableDom.addEventListener('mouseover', () => {
                isScroll = false
            })
            tableDom.addEventListener('mouseout', () => {
                isScroll = true
            })

            setInterval(() => {
                if (isScroll) {
                    tableDom.scrollTop += 3;
                    // 当滚动到底部时修改scrollTop回到顶部
                    if ((tableDom.scrollHeight - (tableDom.clientHeight + tableDom.scrollTop)) < 1 ) {
                        // tableDom.scrollTop = 0;
                        let first = tableDom.children[0]
                        // 删除节点
                        tableDom.removeChild(first)
                        // 将该节点拼接到组件最后
                        tableDom.append(first)
                    }
                }
            }, 100)
        },
    },
    created() {
       this.tableData = this.getTableData() //表格数据赋值 
    },
    mounted() {
        //设置滚动
        this.scroll()
    },
}
</script>

css部分，我这块的scroll_table是整个列表最外层的div，使用的宽高都是百分比，更改成自己的需要就行

.scroll_table{
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 83.5%;
    .table_hader{
       width: 100%;
       height: 10%;
       display: flex;
       justify-content: center;
       align-items: center;
       color: #FFF;
       .tag1{
          width: 15%;
          height: 100%;
          text-align: center;
       }
       .tag2{
          width: 30%;
          height: 100%;
          text-align: center;
       }
       .tag3{
          width: 25%;
          height: 100%;
          text-align: center;
        }
        .tag4{
          width: 30%;
          height: 100%;
          text-align: center;
         }
     }
     .table_body{
         width: 100%;
         height: 90%;
         overflow: hidden;
         overflow-y: scroll;
         color: #FFF;
         &::-webkit-scrollbar {
              width: 0;
         }
         .data_body{
            height:40px;
            display: flex;
            justify-content: center;
            align-items: center;
            // background-color:#B39A41;
            // background-image: radial-gradient(ellipse, rgb(179,154,65,0.3), #B39A41);
            border: 2px solid #FFE661;
            .body1{
                 width: 15%;
                 line-height: 40px;
                 text-align: center;
                 background-image: radial-gradient(ellipse, rgb(179,154,65,0.3), #B39A41);
                 border-right:2px solid #FFE661;
          }
          .body_cont_box{
             display: flex;
             width: 85%;
             background-image: radial-gradient(ellipse, rgb(179,154,65,0.3), #B39A41);
             .body2{
                width: 35%;
                line-height: 40px;
                text-align: center;
              }
              .body3{
                 width: 30%;
                 line-height: 40px;
                 text-align: center;
               }
               .body4{
                 width: 35%;
                 line-height: 40px;
                 text-align: center;  
               }
            }
         }
         .data_body1{
            height:40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:rgb(57, 198, 172,0.18);
            .body1{
               width: 15%;
               line-height: 40px;
               text-align: center;
            }
            .body_cont_box{
                width: 85%;
                display: flex;
                .body2{
                   width: 35%;
                   line-height: 40px;
                   text-align: center;  
                 }
                 .body3{
                   width: 30%;
                   line-height: 40px;
                   text-align: center;  
                 }
                 .body4{
                     width: 35%;
                     line-height: 40px;
                     text-align: center;  
                 }
             }
                                
          }
          .data_body2{
               height:40px;
               display: flex;
               justify-content: center;
               align-items: center;
               .body1{
                  width: 15%;
                  line-height: 40px;
                  text-align: center;
                }
                .body_cont_box{
                   width: 85%;
                   display: flex;
                    .body2{
                        width: 35%;
                        line-height: 40px;
                        text-align: center;  
                    }
                    .body3{
                        width: 30%;
                        line-height: 40px;
                        text-align: center;  
                    }
                    .body4{
                        width: 35%;
                        line-height: 40px;
                        text-align: center;  
                     }
                 }
           }
           .expand{
              width: 100%;
              background-color: rgb(255, 230, 97,0.18);
              div{
                 width: 100%;
                 line-height: 30px;
              }  
           }
      }
}

实现后的效果点击图