deviceManageDaPing/src/views/pages/components/table.vue

<template>
  <div class="auto-scroll-container">
	  <!-- :height="tableHeight" :height="tableData.length>4?tableHeight:'auto'"-->
    <el-table
      ref="scrollTable"
      :data="tableData"
      
      :height="tableHeight"
      @mouseenter.native="pauseScroll"
      @mouseleave.native="resumeScroll"
      @scroll.passive="handleScroll"
      :style="'width: 100%;background: transparent;max-height:'+tableHeight"
    >
      <el-table-column :cell-style="{ whiteSpace: 'pre-line' }" v-for="(ite,idx) in columns" :key="idx" align='center' :prop="ite.prop" :label="ite.label"
      	:width="ite.width">
      	<template slot-scope="scope" >
      	            <span v-if="ite.type&&ite.type=='katype'" :class="[scope.row.name == '1'||scope.row.name == '5'? 'coa' : scope.row.name == '2'? 'cob':scope.row.name == '3'||scope.row.name == '4'? 'coc'  : '']"  >{{ statusFormat(scope.row.name,statusOptions)}}</span>
				   	
				   	<div v-else-if="ite.type&&ite.type=='hh'">
				   		<div>{{ scope.row[ite.prop]}}</div>
				   		<div>{{ scope.row['time']}}</div>
				   	</div>
      			   <div v-else >{{ scope.row[ite.prop] }}</div>
      	  </template>
      </el-table-column>
	  
    </el-table>
    
    <!-- 可选的滚动控制按钮 -->
    <!-- <div class="scroll-controls">
      <el-button @click="scrollToTop">滚动到顶部</el-button>
      <el-button @click="toggleAutoScroll">
        {{ autoScrollEnabled ? '暂停滚动' : '继续滚动' }}
      </el-button>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'AutoScrollTable',
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
	statusOptions: {
		type: Array,
		default: () => []
	},
	tableHeight:{
		type: String,
		default: '100px' // ElementUI默认行高
	},
	scrollTop:{
		type: Number,
		default: 36 // 滚动的高度
	}
  },
  data() {
    return {
      tableData: [],
      autoScrollEnabled: true,
      scrollInterval: null,
      dataRefreshInterval: null,
      isUserScrolling: false,
      lastScrollTime: 0,
    }
  },
  mounted() {
    this.loadData();
    // this.startAutoScroll();
    // this.setupDataRefresh();
  },
  beforeDestroy() {
    this.stopAutoScroll();
    this.clearDataRefresh();
  },
  methods: {
	statusFormat(row, list) {
	  return this.selectDictLabel(list, row);
	},
    async loadData() {
      try {
        // const data = await this.fetchData();
        this.tableData = this.data;
      } catch (error) {
        console.error('加载数据失败:', error);
      }
    },
    startAutoScroll() {
      this.stopAutoScroll();
      
      const tableWrapper = this.$refs.scrollTable?.bodyWrapper;
      if (!tableWrapper) return;
      
      // 初始滚动位置设为0
      tableWrapper.scrollTop = 0;
      
      this.scrollInterval = setInterval(() => {
        if (!this.autoScrollEnabled || this.isUserScrolling) return;
        
        const tableWrapper = this.$refs.scrollTable?.bodyWrapper;
        if (!tableWrapper) return;
        
        // 如果已经滚动到底部，回到顶部
        if (tableWrapper.scrollTop + tableWrapper.clientHeight >= tableWrapper.scrollHeight - 2) {
          tableWrapper.scrollTop = 0;
        } else {
          tableWrapper.scrollTop += 2;
        }
      }, 100);
    },
    stopAutoScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
        this.scrollInterval = null;
      }
    },
    pauseScroll() {
      this.autoScrollEnabled = false;
    },
    resumeScroll() {
      // 如果用户正在手动滚动，不恢复自动滚动
      if (!this.isUserScrolling) {
        this.autoScrollEnabled = true;
      }
    },
    toggleAutoScroll() {
      this.autoScrollEnabled = !this.autoScrollEnabled;
      if (this.autoScrollEnabled) {
        this.isUserScrolling = false;
      }
    },
    handleScroll({ scrollTop }) {
      // 记录最后一次滚动时间
      this.lastScrollTime = Date.now();
      
      // 如果用户手动滚动，暂停自动滚动
      if (Math.abs(scrollTop - this.lastScrollTop) > 5) {
        this.isUserScrolling = true;
        this.autoScrollEnabled = false;
      }
      
      this.lastScrollTop = scrollTop;
      
      // 如果用户停止滚动超过2秒，恢复自动滚动
      clearTimeout(this.scrollResumeTimeout);
      this.scrollResumeTimeout = setTimeout(() => {
        this.isUserScrolling = false;
        this.autoScrollEnabled = true;
      }, 2000);
    },
    scrollToTop() {
      const tableWrapper = this.$refs.scrollTable?.bodyWrapper;
      if (tableWrapper) {
        tableWrapper.scrollTop = 0;
      }
    },
    scrollTo(position) {
      const tableWrapper = this.$refs.scrollTable?.bodyWrapper;
      if (tableWrapper) {
        tableWrapper.scrollTop = position;
      }
    },
    setupDataRefresh() {
      this.clearDataRefresh();
      this.dataRefreshInterval = setInterval(() => {
        this.loadData();
      }, 60000); // 每分钟刷新一次
    },
    clearDataRefresh() {
      if (this.dataRefreshInterval) {
        clearInterval(this.dataRefreshInterval);
        this.dataRefreshInterval = null;
      }
    }
  }
}
</script>

<style scoped lang="scss">
	.coa{color: #FFBB37;}
	.cob{color: #0096FF;}
	.coc{color: #00FFFF;}
.aimgs{min-height: 80px;width: 100%;display: flex;align-items: center;justify-content: center;}
::v-deep .el-table tr{background-color: transparent;color: #FFFFFF;}
::v-deep .el-table td{border:none;font-size: 14px;height: 36px;padding: 0;}
::v-deep .el-table .el-table__header-wrapper th{background-color: transparent !important;color: #fff;padding: 2px 0;height: 36px;box-sizing: border-box;font-size: 14px;border: none;z-index: 10;font-weight: bold;}
::v-deep .el-table__row--striped{background: rgba(185, 223, 250, 0.05) !important}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{background-color: transparent;}
::v-deep  .el-table .current-row > td {
  background-color: transparent !important; /* 或者你想要的颜色 */
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover{
	background-color: transparent !important; /* 或者你想要的颜色 */
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{
	background-color: transparent !important; /* 或者你想要的颜色 */
}
::v-deep .el-table::before{height: 0;}
.scrolling-table-container {
  width: 100%;
  overflow: hidden;
}
::v-deep .el-table__header{width: 100% !important;height: 100%;}
::v-deep .el-table__body{width: 100% !important;height: 100%;}
::v-deep .el-table .cell{padding: 0 2px !important;word-break: break-word;}
.btn{min-width: 82px;display: inline-flex;align-items: center;justify-content: center;font-size: 14px;padding: 0 2px;box-sizing: border-box;height: 23px;color: #FFFFFF;border-radius: 12px;
	&.btna{background: #009944;}
	&.btnb{background: #D85600;}
}
.auto-scroll-container {
  position: relative;
}

.scroll-controls {
  margin-top: 10px;
  text-align: center;
}
/* 隐藏滚动条 gutter */
::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar {
  width: 0 !important;
}
::v-deep .el-table th.gutter {
  display: none;
}

/* 确保表头和表体对齐 */
::v-deep .el-table colgroup col[name='gutter'] {
  width: 0 !important;
}

</style>