Element表格滚动和点击获取单元格内容

页面中使用的组件库是Element。表格添加了三个事件[1]，完成表格内容滚动、单元个点击数据获取以及与走马灯联动：

• cell-click 当某个单元格被点击时会触发该事件
• cell-mouse-enter 当单元格 hover 进入时会触发该事件
• cell-mouse-leave 当单元格 hover 退出时会触发该事件

表格内容滚动

taskTableAutoScroll控制表格内容的滚动和停止（鼠标移入时停止滚动）。此处，每次向下滑动2像素是由于设置为1个像素页面不滚动（之前别的页面1像素也可正常滚动），2像素又不是不能用，回头再看。

// 表格滚动方法
taskTableAutoScroll(stop) {
  // 拿到表格挂载后的真实DOM
  const table = this.$refs.taskTable
  const tableContainer = table.bodyWrapper // 获取table容器
  if (stop) {
    window.clearInterval(this.taskRollTimerId)
  } else {
    this.taskRollTimerId = setInterval(() => {
      tableContainer.scrollTop += 2 // 每次向下滑动2像素
      // 判断滑动到底，就会回到最上方开始重新滑动
      if (tableContainer.clientHeight + tableContainer.scrollTop + 2 >= tableContainer.scrollHeight) {
        tableContainer.scrollTop = 0 // 重置table距离顶部的高度
      }
    }, 60)
  }
},

注意，此处的定时器需要在beforeDestroy 生命周期钩子中清除，避免导致内存泄露和性能问题。

单元格点击事件获取单元格内容并联动走马灯

通过cellClick单元格点击事件。利用row, column, cell, event四个参数（具体作用解释如下），提取出单元格的内容。此处，cell直接包含单元格数据，但是需要操作DOM(不建议); 最终通过行数据对象row和列数据对象column的property属性读取单元格内容。

检索单元格内容（任务名）在走马灯数据中的索引tableToCarouselIndex，使用setActiveItem()方法设置走马灯的显示内容。这样就实现了点击单元格联动走马灯显示内容的效果[2]。

注：也可使用相应 el-carousel-item的 name 属性值，下次再试。

cellClick(row, column, cell, event) {
  //通过row和column.property获取点击的单元格内容
  console.log('任务：', row[column.property])  
  if(column.label !== '阻塞中' && column.label !== '进行中') {
    this.$message.info("当前设置支持查看进行和阻塞的任务！");
    return
  }
  // 通过点击的单元格内容，判断是哪个任务，然后carousel跳转到对应的任务详索引
  let tableToCarouselIndex = this.carouselList.indexOf(row[column.property]);
  console.log('tableToCarouselIndex', JSON.stringify(tableToCarouselIndex))
  this.$refs.carousel.setActiveItem(tableToCarouselIndex);
},

参数说明：

• row: 当前点击的行数据对象，是一个对象，包含了该行数据的所有字段。
• column: 当前点击的列对象，是一个对象，包含了该列的配置信息。
• cell: 当前点击的单元格对象，是一个对象，包含了该单元格的数据和样式信息。
• event: 事件对象，包含了事件的相关信息，如 clientX、clientY 等。

综上，完成摘要的相关需求。

[1] Element - The world's most popular Vue UI framework

[2]Element.ui 【走马灯】实现item和对应的文字一起轮播、点击互相切换_elementui 轮播图怎么实现轮播图出现设置的文字也出现-CSDN博客