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

懒洋洋的华369

已于 2024-01-16 15:33:01 修改

阅读量1.3k

点赞数 24

分类专栏：前端实践文章标签： vue.js elementui 前端

于 2024-01-15 22:18:55 首次发布

本文链接：https://blog.csdn.net/weixin_61933613/article/details/135612343

版权

前端实践专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章详细描述了如何在ElementUI的表格中使用cell-click、cell-mouse-enter和cell-mouse-leave事件，实现表格内容滚动控制和单元格点击联动走马灯的功能，以及如何通过DOM操作获取单元格内容并更新走马灯显示。

摘要由CSDN通过智能技术生成

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

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

<el-table
  ref="taskTable"
  :cell-style="{ borderColor: 'rgba(255,255,255,0.20)', fontSize: '16px', color: '#FFFFFF' }"
  :header-cell-style="{ borderColor: 'rgba(255,255,255,0.20)', color: '#FFFFFF', fontSize: '16px', fontFamily: 'PingFangSC-Regular' }"
  style="width: 100%"
  border
  height="350px"
  :data="taskTableList"
  @cell-click="cellClick"
  @cell-mouse-enter="taskTableAutoScroll(true)"
  @cell-mouse-leave="taskTableAutoScroll()">
  <el-table-column prop="unstartedTask" label="未启动" width="250px" />
  <el-table-column prop="inProgressTask" label="进行中" width="250px" />
  <el-table-column prop="blockedTask" label="阻塞中" width="250px" />
  <el-table-column prop="completedTask" label="已完成" width="250px"  />
</el-table>

表格内容滚动

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);
},

参数说明：