vue에서 데이터를 다시 가져오면 페이지가 길어지고, 페이지가 업데이트된 후 브라우저 스크롤 막대가 이전 탐색 기록 위치로 스크롤해야 합니다. 그리고 현재 페이지의 어떤 요소를 가져오는 방법은 스크롤 막대를 생성합니다.

현재 페이지 스타일은 다음과 같습니다.

 코드는 다음과 같습니다

  <section id="detailSection">
    <el-table
      ref="multipleTable"
      :data="logDetailList"
      style="width: 650px;margin:20px auto;"
      id="dialogDetail"
      :show-header="false"
      :cell-style="cellStyle"
      v-loading="formLoading"
    >
      <el-table-column
        class="log-detail-origin_timestamp"
        prop="_source.origin_timestamp"
        label="时间"
        width="185"
      ></el-table-column>
      <el-table-column class="log-detail-msg" label="查询的log">
        <template slot-scope="props">
          <el-button
            class="asidebtn-up"
            v-if="props.$index == 0"
            type="primary"
            @click="searchUp"
          >向上查询</el-button>
          <el-button
            class="asidebtn-down"
            v-if="props.$index == logDetailList.length - 1"
            type="primary"
            @click="searchDown"
          >向下查询</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>

먼저 현재 el-table의 높이를 가져옵니다 (여기서 $refs 뒤의 multipleTable은 el-table의 ref에 의해 바인딩된 값입니다).

 let positionHeight = this.$refs.multipleTable.bodyWrapper.scrollHeight;

둘째, 인터페이스를 사용하여 새 데이터를 얻고 (즉, logDetailList의 값 업데이트) 새 데이터를 페이지에 렌더링합니다.

마지막으로, 데이터 렌더링이 완료된 후 $nextTick 메서드를 사용하여 스크롤 막대를 이전 위치로 이동합니다.

(1) 새로운 데이터의 el-table 길이를 구합니다.

let positionHeight2 = this.$refs.multipleTable.bodyWrapper.scrollHeight;

(2) 길이 빼기. 새 데이터 페이지의 길이 - 이전 데이터 페이지의 길이 = 현재 스크롤 막대의 스크롤 위치

let screenHeight = positionHeight2 - positionHeight;

(3) 스크롤바 위치를 설정합니다. 참고: scrollTo 메소드는 페이지에 스크롤 막대가 있는 요소여야 합니다. 그리고 el-table의 상위 요소여야 합니다.

document.querySelector(".content-container").scrollTo(0, screenHeight);

이건 끝났어.

추가의:

현재 페이지의 어떤 요소가 스크롤 막대를 생성하는지 가져오는 방법(vue): 페이지가 스크롤된 후 콘솔이 인쇄합니다.

methods: {    
  findscroller(element) {
    element.onscroll = function() {
      console.log(element);
    };
  Array.from(element.children).forEach(this.findscroller);
 }
}
mounted() {
  this.findscroller()
}

 또는 다음 코드를 콘솔에 직접 복사하세요. 입력하고 스크롤 막대를 드래그하세요.

function findscroller(element){
  element.onscroll=function () {
    console.log(element)
  }
  Array.from(element.children).forEach(findscroller)
}
findscroller(document.body)