vue中点击按钮跳转到el-table的某个标识位置所在行

 

客户需求, 每点击一次按钮就跳到el-table的具体位置,省的自己滚动找数据.

实现思路:通过循环行和列找到标识数据所在行的id,存储到数组里,

然后在按钮方法里获取 id 所在行的dom的高度, 使用scrollTop方法 = id 所在行的dom的高度 - 容器本身的高度

 先获取el-table 的数据

// 父组件获取点击日历的当天数据
    getHistoryDatas() {
      //开启遮罩层
      this.loading = true;

      let query = {
        startTime: this.calendarDayStartTime,
        endTime: this.calendarDayEndTime,
        stationCode: this.stationCode,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        searchType: this.dataType,
        tagStatus: this.value
      };
      let that = this;
      // 查询点击日历当天的数据
      getHistoryData(query)
        .then(response => {
          // that.historyDataTables = response.rows;
          const { rows, total } = response;
          if (that.currentPage === 1) {
            that.historyDataTables = rows;
          } else {
            that.historyDataTables.push(...rows);
          }
          that.totalCount = total; // 数据总条数
          that.totalNum = Math.ceil(that.totalCount / that.pageSize); // 计算总页码

          // 获取表格 DOM 元素和表格数据 把表格的标识数据所在行的id存进数组里,为写按钮跳转标识位置使用
          const tableData = that.historyDataTables;
          const columns = that.$refs.multipleTable.columns;
          // 遍历表格行，查找满足条件的行
          for (let i = 0; i < tableData.length; i++) {
            const row = tableData[i];
            for (let j = 3; j < columns.length; j++) {
              const column = columns[j];
              // 判断是否满足条件
              if (row[column.property + "_tag_status"] === "0") {
                // 获取对应的行元素
                that.rowIdList.push(row.id);
                break;
              }
            }
          }
        })
         .finally(() => {
          // 关闭遮罩层
          that.loading = false;
          that.pageIsEnd = true; // 数据加载完毕，设置为 true

          if (that.dataType == "分钟数据") {
            that.historyDataTables.forEach(data => {
              data.sampleTime = moment(data.sampleTime).format(
                "yyyy-MM-DD HH:mm:ss"
              ); //去掉日
            });
          }
          // 下面的代码用不到了
          that.$nextTick(function() {
            let dom = that.$refs.multipleTable.bodyWrapper;
            //监听table滚动
            // dom.addEventListener("scroll", () => {
            //   that.scrollTop = dom.scrollTop;
            // });
            // 当设置每页数据数量时使用滚动加载
            const handleScroll = throttle(500, () => {
              that.scrollTop = dom.scrollTop;
              const distanceToBottom =
                dom.scrollHeight - that.scrollTop - dom.clientHeight;
              if (distanceToBottom <= 100 && !that.loadingData) {
                if (that.currentPage >= that.totalNum) {
                  that.loading = false;
                  that.pageIsEnd = true; // 更新状态为 pageIsEnd
                  return;
                } else {
                  that.currentPage += 1;
                  that.getHistoryDatas();
                }
              }
            });
            dom.addEventListener("scroll", handleScroll);
            // 在重新发送请求后回到原先的滚动位置
            dom.scrollTop = that.scrollTop;
          });
        });
    },

按钮的方法

 // 滚动到目标行所在的位置
    scrollToTargetRow() {
      if (this.count >= this.rowIdList.length) {
        this.count = 0;
      } else {

        // 获取表格 DOM 元素和标识数据所在行的id
        const id = this.rowIdList[this.count];
        
        this.TableDom = this.$refs.multipleTable.$el; // 获取table元素

        // 获取所在行的dom元素,nth-child是从1开始的,所以我的id设置的从1开始
        const rowEl = this.TableDom.querySelector(
          `.el-table__row:nth-child(${id})`
        );
        const scrollEl = this.TableDom.querySelector(".el-table__body-wrapper");

        if (rowEl) {
          // 滚动到目标行所在位置
          this.$nextTick(() => {
            const offsetTop = rowEl.offsetTop; // 目标行的高度
            scrollEl.scrollTop = offsetTop - scrollEl.offsetTop; // 目标行的高度 - 容器本身的高度
          });
          this.count++;
        }
      }
    },