Click the button in vue to jump to the row of a certain identification position of el-table

 

According to customer needs, every time the button is clicked, it jumps to the specific position of the el-table, saving the need to scroll to find data.

Implementation idea: Find the ID of the row that identifies the data by looping through rows and columns, and store it in an array.

Then in the button method, get the height of the dom in the row where the id is located, and use the scrollTop method = the height of the dom in the row where the id is located - the height of the container itself

 First get the data of 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;
          });
        });
    },

button method

 // 滚动到目标行所在的位置
    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++;
        }
      }
    },