angular实现表格无限循环滚动效果、鼠标移入停止滚动、鼠标移出继续滚动-组件封装

本文链接：https://blog.csdn.net/m0_67862954/article/details/137052453

文章描述了一个使用Angular编写的表格组件，包含滚动功能、表头自定义和数据绑定，以及鼠标事件的处理，如点击行触发事件。

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

// ---表格组件-html

<!-- 表格滚动 -->
<div class="tableContainer">
    <div class="right_table_div" [ngStyle]="{height:scrollHeight+'px'}">
        <div class="table_title_div table_width_item">
            <div *ngIf="isSnumber" style="width: 120px;">序号</div>
            <div *ngFor="let item of theadListData;let index = index" [ngStyle]="{width: item['width']}">{
  
  {item.text}}</div>
        </div>
        <div class="table_items_div"  #scrollerListBox [ngStyle]="{'overflow': scrollerOverflow}" (mouseenter)="mouseEnterScroll()" (mouseleave)="mouseLeaveScroll()">
            <div class="table_item_div table_width_item" *ngFor="let item of tableData;let index = index" (click)="handleTableClick(item,index)" [ngClass]="avtiveTdIndex == index ? 'table-list-action' : ''">
                <div *ngIf="isSnumber" style="width: 120px;">{
  
  {index+1}}</div>
                <div *ngFor="let itemTbody of theadListData" [ngStyle]="{width: itemTbody['width']}" [ngClass]="itemTbody['isOverflow'] ? 'textOverflow' : ''">{
  
  {isNullHandleFn(item[itemTbody['fieldName']])}}</div>
            </div>
        </div>
    </div>
</div>

// ---表格组件-ts

import {Component,ViewEncapsulation,Input,Output,SimpleChanges,EventEmitter,ElementRef,ViewChildren, ViewChild,QueryList} from '@angular/core';

/**数据传参格式、参数说明
 * scrollHeight //容器高度(数字)
 * isSnumber //第一列是否显示序号(布尔值)
 * theadListData[{text:'',fieldName:'',width:'',isOverflow:true,}]:表头相关(数组)(有几列就写几条数据)
 *     text-表头文字（字符串）、
 *     fieldName